javascript - Emberjs：如何使用变量中的视图名称渲染视图？

Question

我想在板上添加一些卡片，所有卡片都非常不同。所以我想为每张可以绑定不同事件和模板的卡片创建不同的视图。我在卡片模型中设置了一个“类型”属性来区分卡片。

板模板如下所示：

{{#each card in cards}}
  {{render card.type card class="card"}}
{{/each}}

但是，渲染帮助的第一个参数不能是变量，它只能是卡片视图名称字符串。

有谁知道如何做到这一点？

Answer 1

正如您已经提到的，内置render帮助器只接受一个字符串来查找要渲染的模板，因此一种可能的解决方案是编写自己的自定义render帮助器，然后在获得正确名称后将card.get('type')渲染委托给内置render帮助器. 这可能看起来像这样：

Ember.Handlebars.registerBoundHelper('renderCard', function(context, card, options) {
  return Ember.Handlebars.helpers.render.call(context, card.get('type'), 'card', options);
});

之后，您可以在模板中像这样使用它：

{{#each card in cards}}
  {{renderCard this card}}
{{/each}}

编辑

我还添加了一个基本的jsbin，显示它可以正常工作。

编辑 2

再次编辑 jsbin，使用要渲染到模板中的对象数据，请参见此处。

编辑 3

可悲的DS.FixtureAdapter是，不支持embedded记录，这是您需要使其工作的记录。但是你可以DS.RESTAdapter像这样配置你的原始：

App.Adapter = DS.RESTAdapter.extend();

App.Adapter.map('App.Dashboard',
  cards: {embedded: 'always'}
);

App.Store = DS.Store.extend({
  adapter: App.Adapter
});

这样card记录always与父记录一起加载。我猜做这个改变会使card.get('type')你的车把助手调用返回值而不是undefined。

希望能帮助到你。

Answer 2

对于上面的 Ember 1.9 解决方案不起作用。使用另一种方式注册助手：

Ember.Handlebars.registerHelper 'renderDynamic', (context, model, options)->
  contextString = options.hash.contextString
  model = options.data.view.getStream(model).value()
  return Ember.Handlebars.helpers.render(model.get('type'), contextString, options)

在模板中：

= hb 'renderDynamic "this" currentModel contextString="curremtModel"

或在车把中：

{{renderDynamic "this" currentModel contextString="curremtModel"}}