{{action}} connectionType ile ilişkiyi kullanID

Question

{ id: 1, form_id: 5} gibi bir bağlamda bir görünüm verildiğinde, form_id kullanarak forma bir {{action}} bağlantısı oluşturmak istiyorum.

Bence kodu gibi görünür:

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

Ve benzeri benim yönlendirici eylem arar:

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'. 

Ben: Ben okur bir hata alıyorum

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

Sorunun, transitionTo için bağlamı kurduğum şekilde olduğunu tahmin ediyorum, ancak Doğru çözümü bul.

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

Ve cooresponding keman:

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

Answer 1

Ben kullanarak bu soruna çirkin çözüm ile gelip başardı İşte

sorunu yeniden tam koddur işlemimin içeriği olarak hesaplanmış özellik.

<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') 
}); 

Ve çalışma keman burada: anahtar snippet'leridir

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

Ancak Tom Dale konuştuktan sonra, "doğru yolu" Bunu çözmenin çözmek için açıktır Sorun, id değerleri yerine materyalize edilmiş nesneler kullanmaktır. Ember verilerini kullanıyorsanız, bu "sideloading" belongsTo özelliği için harika bir kullanım örneğidir.