Ember.js {{action}}使用关系id与Transitiono链接

给定一个具有类似

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

我猜问题出在我设置

转换到

的上下文的方式上，但我还没有找到正确的解决方案

以下是重现问题的完整代码：

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

{{outlet}}
{{action showForm form_id href=true}
MyApp=Ember.Application.create({
autoinit:false
});
MyApp.router=Ember.router.create({
根：Ember.Route.extend({
索引：Ember.Route.extend({
路线：“/”，
//抛出错误：
//必须为中的事件“showForm”指定目标状态
//以当前状态“root.index”链接到它
//
展示形式：功能（路由器、事件）{
var form_id=event.context；
transitiono（'root.form'，{id:form_id}）；
},
//无法工作，因为表单反序列化查找的是id，而不是表单id
//showForm:Em.Route.transitiono（'root.form'），
//这也行不通
//showForm:Em.Route.transitiono（'root.form'，{id:this.form_id}），
连接插座：功能（路由器、上下文）{
var group=Em.Object.create（{id:1，form_id:5}）；
router.get（'applicationController'）.connectOutlet（'group'，group）；
}
}),
表格：Ember.Route.extend({
路由：'/form/：id'，
序列化：函数（路由器、上下文）{
返回{id:context.id}
},
反序列化：函数（路由器、上下文）{
var form=Em.Object.create（{id:5，名称：'my form'}）；
返回MyApp.Form.find（context.id）；
},
连接插座：功能（路由器、上下文）{
//遗漏了小提琴的例子
}
})
})
});
MyApp.ApplicationController=Ember.Controller.extend（{}）；
MyApp.GroupController=Em.ObjectController.extend（{}）；
MyApp.GroupView=Em.View.extend（{templateName:'group'}）；
MyApp.initialize（MyApp.router）；​

还有小提琴：

---

我使用计算属性作为我操作的上下文，想出了一个丑陋的解决方案。关键代码段包括：

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

MyApp.GroupView=Em.View.extend（{
templateName:'组'，
formHash:function（）{
返回{id:this.get（'controller'）.get（'form_id'）}；
}.property（'form_id'））
});

工作小提琴在这里：

然而，在与Tom Dale交谈之后，很明显，解决这个问题的“正确方法”是使用物化对象而不是id值。如果您使用的是余烬数据，这是“侧加载”belongsTo特性的一个很好的用例