在Ember中动态添加组件

Question

使用Ember:1.13.11,Ember数据:1.13.8,ember-cli:1.13.12

我想动态地向网页添加一个组件 - 这个网页是另一个组件的模板,不认为它会产生任何不同 - .这是我的代码片段,我在其中尝试将一个名为LyricsEditorLine的组件添加到<div>标记中,不知何故,这样

议程-α/组件/歌词-editor.js内

import Ember from 'ember';
import LyricsEditorLine  from 'agenda-alpha/components/lyrics-editor-line';

export default Ember.Component.extend({
   afterRenderEvent:function(){
      LyricsEditorLine.create().appendTo($("#in"));
 },
init:function(){
  Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
  this._super();
 }
});

议程-α/模板/组件/歌词,editor.hbs

<div id='in'> </div>

每次这给了我

 'Uncaught Error: Assertion Failed: You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead'

寻找ContainerViewhere发现它已被弃用 我发现的大部分答案都没有使用ember-cli并且作为初学者使得它更难理解

我希望能够根据用户需要添加组件

Answer 1

我想你可能想要一个{{component}}允许动态渲染组件的帮助器.

{{component "componentName" param1=paramValue param2=anotherParamValue}}

这意味着你可以拥有(编写示例)

{{component "lyrics-editor-line" line=line}}

一个最好的事情是componentName可以成为一个受约束的财产

{{component componentName line=line}}

在您的控制器/组件中:

componentName: Ember.computed('prop1','prop2', function() {
  if (this.get('prop1') === 'A') {
    return 'my-component-a';
  }
  return 'default-component';
}),

line: computed('prop3', function() {
   return this.get('prop2');
})

此外,您可以在每个循环中包含组件帮助程序(示例来自Ember文档)

{{#each model as |post|}}
  {{!-- either foo-component or bar-component --}}
  {{component post.componentName post=post}}
 {{/each}}