{{action}} link z przejściem Aby użyć identyfikatora relacji

Question

W widoku z kontekstem, takim jak { id: 1, form_id: 5}, chcę utworzyć link do formularza przy użyciu form_id.

Mój kod widoku wygląda następująco:

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

a akcja w moim routerze wygląda następująco:

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

otrzymuję komunikat o błędzie, który brzmi:

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

jestem zgadywanie, że problem polega na tym, że konfiguruję kontekst dla transitionTo, ale nie byłem w stanie o wymyśl prawidłowe rozwiązanie.

Oto pełny kod do odtworzenia problemu:

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

a cooresponding skrzypce:

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

Answer 1

udało mi się wymyślić brzydkie rozwiązanie tego problemu przy użyciu obliczona właściwość jako kontekst mojego działania. Kluczowe fragmenty są:

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

I skrzypce pracy jest tutaj:

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

Jednak po rozmowie z Tom Dale, to jest jasne, że "właściwy sposób", aby rozwiązać rozwiązać ten problem Problem polega na użyciu zmaterializowanych obiektów zamiast wartości id. Jeśli korzystasz z danych Ember, jest to bardzo użyteczny przypadek dla funkcji "sideloading" belongsTo.