如何在模板中按名称动态加载 ember 组件? [英] How to dynamically load ember components by name in a template?

问题描述

我的问题与 this answer，但我无法让代码与 ember 1.7.0 和 & 一起使用余烬cli.

My question is basically the same as on this answer, but I can't get the code to work with ember 1.7.0 and & ember-cli.

我的模型中有一个 widget 属性，而在我的模板中，我想有类似的东西:

I have a widget property in my model, and in my template I want to have something like:

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

还有一个看起来像这样的问题模型:

And a question model that looks like:

{ 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 助手，其中包含以下内容:

I've created a render-component helper that contains the following:

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 方法，所以我不知道代码是否已经过时.

But this doesn't work. component is undefined. The API docs for Ember.Handlebars.get aren't very helpful in explaining what the options parameter is. Also, there's no mention of a resolveHelper method in the docs now, so I don't know if the code is out of date anyway.

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

How can I load components by name from a variable?

推荐答案

OK 所以应该是:

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}}

这篇关于如何在模板中按名称动态加载 ember 组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！