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

问题描述

我的问题基本上与这个答案，但是我无法让代码与Ember 1.7.0和& ember-cli。

我的模型中有一个小部件属性，在我的模板中，我想要一些东西如：

  {{＃每个问题的问题}} 
 {{#with question}} 
 <标签> {{TITLE}}< /标签> 
 {{render-component widget params = params}} 
 {{/ with}} 
 {{/ each}} 
  

一个问题模型看起来像：

  {id：6 ，
标题：这是一个是/否的情况？，
 help_text：'选择一个选项'，
小部件：'是 - 否'，
 params：
 {
 yes：{
 text：'你选择是'，
 class：'success'
}，
否：{
 text： 小心，你选了，
 class：'danger'
} 
} 
} 
  

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

$ b $从ember导入Ember; b

  
 
函数renderComponent（componentPath，options）{
 console.log（'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 
}; 
 
导出默认值Ember.Handlebars.makeBoundHelper（renderComponent）; 
  

但这不行。 组件未定义。 Ember.Handlebars.get 的API文档对于说明选项参数是什么。此外，现在文件中没有提到 resolveHelper 方法，所以我不知道代码是否过期。

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

解决方案

确定应该是： / p>

helpers / render-component.js ：

 从ember导入Ember; 
 
函数renderComponent（componentPath，options）{
 console.log（'helper with comp ='+ componentPath +'，opts ='+ options）; 
 var helper = Ember.Handlebars.resolveHelper（options.data.view.container，componentPath）; 
 return helper.call（this，options）; 
} 
 
 export {
 renderComponent 
}; 
 
导出默认值Ember.Handlebars.makeBoundHelper（renderComponent）; 
  

使用：

  {{render-component widget params = params}} 
  

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.

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

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);

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 so it should be:

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);

Use with:

{{render-component widget params=params}}

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