{{action}}は、関係IDを使用してtransitionToとリンクします

Question

{ id: 1, form_id: 5}のようなコンテキストを持つビューでは、form_idを使用してフォームへの{{action}}リンクを作成します。

マイビューのコードは次のようになります。

<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);​ 

そしてcoorespondingフィドル：

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

Answer 1

私が使用してこの問題に醜い解決策を考え出すことができました私の行動のコンテキストとして計算されたプロパティ。

<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/

しかし、トム・デールに話した後、「正しい方法」はこの問題を解決するために解決することは明らかです問題は、id値の代わりにマテリアライズされたオブジェクトを使用することです。 Emberデータを使用している場合、これは "サイドローディング" belongsTo機能の大きなユースケースです。