添加组件动态地灰烬

使用恩贝尔：11年1月13日，灰烬数据：1.13.8，烬-CLI：12年1月13日添加组件动态地灰烬

我想动态组件添加到网页 - 这是网页模板的另一个组件不认为它会产生任何影响 - 。这里是我的代码片段中，我尝试了一个名为LyricsEditorLine组件添加到<div>标签，不知何故像this

议程-α/组件/歌词 - 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发现，这是deprecated 大多数，我发现不使用灰烬，CLI和作为一个初学者，使答案变得很难理解

我希望能够到组件多添加为用户需要

来源

2016-01-13 john-salib

简短的回答是，你不能这样做，没有一些潜在的不良副作用。为什么你不能使用Handlebars'{{#if}}'助手来动态渲染组件？ – GJK

未定义要添加的组件数量。这取决于用户的需求 –

你仍然可以在Handlebars中做到这一点，你只需要使用某种循环（有几种方法可以做到这一点）。一般来说，使用Handlebars和计算/存储的属性几乎可以用jQuery完成所有工作。 – GJK

我想你可能想{{component}}帮手，它允许dynamically render a 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'); 
})

此外，你可以有一个每个循环（从灰烬文件所采取的示例）内组件帮手

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

来源

2016-01-13 17:48:51

感谢您的回答Pedro，但您提供的只是一个已存在于.hbs文件中的组件，但我希望用户能够在运行时添加尽可能多的东西，或者根本不需要添加项目购物车，你的答案使它只有一个组件，并且在循环的情况下，我尝试将组件添加到模型数组，但它不起作用 –

组件需要存在于您的ember应用程序中，而不是在那个特定的.hbs文件中....或者它不会很有用。只要组件在您的应用程序中可用，您就可以使用'component'助手来显示该组件。我不明白“将组件添加到模型阵列”的意思。组件仅存在于模板中，您的模型用于您的数据。您可以使用数据来选择要呈现的内容。并使用组件来呈现该数据。 –

是的你是对的，我只是把所有这些组件全错了，我认为我必须在控制器端创建组件，然后将它附加到DOM，而不仅仅是更新发送给{{each }}助手。 –

添加组件动态地灰烬

回答

相关问题