在 Ember 中动态添加组件

Question

正在使用 Ember：1.13.11， Ember 数据：1.13.8， ember-cli：1.13.12

我想向网页动态添加一个组件 - 此网页是另一个组件的模板，我认为这不会有任何区别-。这是我的代码片段，我在其中尝试将名为 LyricsEditorLine 的组件添加到 <div> 标记，有点像 this

agenda-alpha/components/lyrics-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();
 }
});

agenda-alpha/templates/components/lyrics-editor.hbs

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

每次这给了我

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

找了ContainerViewhere发现是deprecated 我找到的大部分答案都没有使用 ember-cli，作为初学者很难理解

我希望能够根据用户需要添加尽可能多的组件

Answer 1

我想你可能想要 {{component}} 帮助程序，它允许 dynamically render a component。

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

这意味着你可以拥有（编造的例子）

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

最好的事情之一是 componentName 可以是一个界限属性

{{component componentName line=line}}

在你的controller/component中：

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

在 Ember 中动态添加组件

Adding component dynamically in Ember

ember.js

ember-cli