5

{ id: 1, form_id: 5}のようなコンテキストを持つビューが与えられた場合{{action}}、form_id.

私のビューコードは次のようになります:

<script type="text/x-handlebars" data-template-name="group">
  {{action showForm form_id href=true}}
</script>

私のルーターでのアクションは次のようになります。

showForm: function(router, event) {
  var form_id = event.context;
  router.transitionTo('root.form', { id: form_id });
},

次のようなエラーが表示されます。

Uncaught Error: assertion failed: You must specify a target state for event 'showForm' in order to link to it in the current state 'root.index'.

のコンテキストを設定する方法に問題があると推測していますがtransitionTo、正しい解決策を見つけることができませんでした。

問題を再現するための完全なコードは次のとおりです。

<script type="text/x-handlebars" data-template-name="application">
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="group">
  {{action showForm form_id href=true}}
</script>

MyApp = Ember.Application.create({
  autoinit: false
});

MyApp.router = Ember.Router.create({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/',

      // Throws error: 
      //    You must specify a target state for event 'showForm' in 
      //    order to link to it in the current state 'root.index'
      //
      showForm: function(router, event) {
        var form_id = event.context;
        router.transitionTo('root.form', { id: form_id });
      },

      // Won't work because form deserialize finds id, not form_id 
      //showForm: Em.Route.transitionTo('root.form'),

      // This won't work either
      // showForm: Em.Route.transitionTo('root.form', { id: this.form_id }),        

      connectOutlets: function( router, context ){
        var group = Em.Object.create({ id:1, form_id: 5 });
        router.get( 'applicationController' ).connectOutlet( 'group', group );
      }
    }),
    form: Ember.Route.extend({
      route: '/form/:id',
      serialize: function( router, context ){
        return { id: context.id }
      },
      deserialize: function( router, context ){
        var form = Em.Object.create({ id: 5, name: 'my form' });
        return MyApp.Form.find( context.id );
      },
      connectOutlets: function( router, context ){
        // left out for fiddle example 
      }
    })
  })
});

MyApp.ApplicationController = Ember.Controller.extend({});

MyApp.GroupController = Em.ObjectController.extend({});
MyApp.GroupView = Em.View.extend({ templateName:  'group' });

MyApp.initialize(MyApp.router);​

そして対応するフィドル：

http://jsfiddle.net/jefflab/LJGCz/

4

1 に答える 1

2

アクションのコンテキストとして計算されたプロパティを使用して、この問題に対する醜い解決策を思いつくことができました。主なスニペットは次のとおりです。

<script type="text/x-handlebars" data-template-name="group">
  <a {{action showForm view.formHash href=true}}>go to form</a>
</script>

MyApp.GroupView = Em.View.extend({ 
  templateName:  'group',
  formHash: function() {
    return { id: this.get('controller').get('form_id') };
  }.property('form_id')
});

そして、働くフィドルはここにあります：

http://jsfiddle.net/jefflab/pGv8u/

しかし、Tom Dale と話した後、この問題を解決するための「正しい方法」は、id 値の代わりに実体化されたオブジェクトを使用することであることが明らかになりました。Ember データを使用している場合、これは「サイドローディング」の belongsTo 機能の優れた使用例です。

于 2012-12-07T00:54:15.663 に答える