Question

我的问题与this answer基本相同，但我无法使用ember 1.7.0和＆amp;烬-CLI。

我的模型中有widget属性，在我的模板中我希望有类似的内容：

{{#each question in questions}}
{{#with question}}
  <label>{{title}}</label>
  {{render-component widget params=params}}
{{/with}}
{{/each}}

一个看起来像的问题模型：

{ id: 6,
  title: "Is this a yes/no situation?",
  help_text: 'Pick an option',
  widget: 'yes-no',
  params:
  {
    yes: {
      text: 'You picked yes',
      class: 'success'
    },
    no: {
      text: 'Be careful, you picked no',
      class: 'danger'
    }
  }
}

我创建了一个render-component帮助程序，其中包含以下内容：

import Ember from 'ember';

function renderComponent(componentPath, options) {
  console.log('inside helper with comp=' + componentPath + ', opts=' + options);
  var component = Ember.Handlebars.get(this, componentPath, options);
  var helper = Ember.Handlebars.resolveHelper(options.data.view.container, component);
  return helper.call(this, options);
}

export {
  renderComponent
};

export default Ember.Handlebars.makeBoundHelper(renderComponent);

但这不起作用。 component未定义。 Ember.Handlebars.get的API文档在解释options参数的内容时非常有用。此外，现在没有在文档中提及resolveHelper方法，所以我也不知道代码是否已过时。

如何从变量中按名称加载组件？

Answer 1

这个问题已经过时了。 Ember包含built-in dynamic component helper并且已经很长时间了。

Answer 2

好的，应该是：

helpers/render-component.js：

import Ember from 'ember';

function renderComponent(componentPath, options) {
  console.log('inside helper with comp=' + componentPath + ', opts=' + options);
  var helper = Ember.Handlebars.resolveHelper(options.data.view.container, componentPath);
  return helper.call(this, options);
}

export {
  renderComponent
};

export default Ember.Handlebars.makeBoundHelper(renderComponent);

使用：

{{render-component widget params=params}}

Answer 3

您可以在此处找到渲染组件的另一个实现

https://github.com/vvs-code/ember-render-helper

它允许来自动态属性的传递名称和参数/参数

如何在模板中按名称动态加载ember组件？

3 个答案: