添加组件动态地灰烬
使用 恩贝尔: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和作为一个初学者,使答案变得很难理解
我希望能够到组件多添加为用户需要
我想你可能想{{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}}
感谢您的回答Pedro,但您提供的只是一个已存在于.hbs文件中的组件,但我希望用户能够在运行时添加尽可能多的东西,或者根本不需要添加项目购物车,你的答案使它只有一个组件,并且在循环的情况下,我尝试将组件添加到模型数组,但它不起作用 –
组件需要存在于您的ember应用程序中,而不是在那个特定的.hbs文件中....或者它不会很有用。只要组件在您的应用程序中可用,您就可以使用'component'助手来显示该组件。 我不明白“将组件添加到模型阵列”的意思。组件仅存在于模板中,您的模型用于您的数据。您可以使用数据来选择要呈现的内容。并使用组件来呈现该数据。 –
是的你是对的,我只是把所有这些组件全错了,我认为我必须在控制器端创建组件,然后将它附加到DOM,而不仅仅是更新发送给{{each }}助手。 –
简短的回答是,你不能这样做,没有一些潜在的不良副作用。为什么你不能使用Handlebars'{{#if}}'助手来动态渲染组件? – GJK
未定义要添加的组件数量。这取决于用户的需求 –
你仍然可以在Handlebars中做到这一点,你只需要使用某种循环(有几种方法可以做到这一点)。一般来说,使用Handlebars和计算/存储的属性几乎可以用jQuery完成所有工作。 – GJK