javascript - Ember : How to render a view with the view name in variable?

Question

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

板模板如下所示:

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

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

有人知道如何实现这一目标吗？

Answer 1

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

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，使用要渲染到模板中的对象数据，see here .

编辑3

遗憾的是，DS.FixtureAdapter 不支持嵌入 记录，而这是您需要使其工作的。但是您可以像这样配置原始 DS.RESTAdapter:

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

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

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

这样，card 记录总是与父记录一起加载。我猜想进行此更改将使 Handlebars 助手中对 card.get('type') 的调用返回值，而不是 undefined。

希望有帮助。