Question

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

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

问题在于渲染并不期望变量作为其第一个参数，因此在较旧的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中动态渲染模板

1 个答案: