EmberJS registerHelper 在 Ember 1.8 中动态呈现模板

Question

我想动态呈现模板，如下所示：

{{#each layout in layouts}}
   {{render layout.get('type') layout}}
{{/each}}

问题是 render 不期望变量作为它的第一个参数，所以在旧的 EmberJS 版本中，可以通过注册一个助手来解决这个问题：

Ember.Handlebars.registerBoundHelper('render_layout', 
  function(callingContext, layout, options) {
    return Ember.Handlebars.helpers.render.call(callingContext, 
                layout.get('type'), 'layout', options);
});

并在模板中：

{{#each layout in layouts}}
     {{render_layout this layout}}
{{/each}}

不幸的是，这个东西在较新的 ember 版本中不起作用。 Ember.Handlebars.helpers.render.call 需要 3 个参数，但我无法正确处理它们。有任何想法吗？我试过了： (this, layout.get('type'), options)

并在模板中：

{{#each layout in layouts}}
     {{render_layout layout}}
{{/each}}

我得到Uncaught TypeError: Cannot read property 'pushChildView' of null

...以及许多其他人。

如有任何建议，我们将不胜感激。

Answer 1

组件允许您指定 layoutName。您可以根据传入组件的参数动态计算布局名称。

App.XRenderComponent = Ember.Component.extend({
  tagName: "",
  layoutName: function(){
    return this.get('displayLayout.type'); 
  }.property('displayLayout'),
});

那你就可以了

  <script type="text/x-handlebars" id="index">
    {{#each layout in model}}
      {{ x-render displayLayout=layout }}
    {{/each}}   
  </script>

查看工作示例here

EmberJS registerHelper 在 Ember 1.8 中动态呈现模板

EmberJS registerHelper to dynamically render a template in Ember 1.8

ember.js