如何动态地将组件添加到另一个组件的div中？

Question

I got an error when I want try to add a component into a div DOM in another component. 我想将一个组件添加到另一个组件的div DOM中时出现错误。

Uncaught Error: Assertion Failed: You cannot append to an existing Ember.View. 未捕获的错误：断言失败：您无法追加到现有的Ember.View。 Consider using Ember.ContainerView instead. 考虑改用Ember.ContainerView。

here is my JSBin 这是我的JSBin

 App = Ember.Application.create(); App.MyListComponent= Ember.Component.extend({ layoutName:'my-list', actions:{ addItem:function(){ console.log("add item action"); App.MyListItemComponent.create().appendTo("#holder"); }, }, }); App.MyListItemComponent= Ember.Component.extend({ layoutName:'my-list-item', });

 html, body { margin: 20px; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ember Starter Kit</title> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://builds.emberjs.com/release/ember-template-compiler.js"></script> <script src="http://builds.emberjs.com/release/ember.debug.js"></script> </head> <body> <script type="text/x-handlebars"> <h2>Welcome to Ember.js</h2> {{outlet}} </script> <script type="text/x-handlebars" data-template-name="index"> {{my-list}} </script> <script type="text/x-handlebars" id="my-list"> <button {{action "addItem"}}>add item</button> This is a holder: <div id="holder"> i am inside holder </div> This is static item: {{my-list-item}} </script> <script type="text/x-handlebars" id="my-list-item"> i am a list item </script> </body> </html>

can you have a look and tell me how to do? 您可以看看并告诉我该怎么做吗？

thank you very much 非常感谢你

Answer 1

I dont think, your approach is right. 我不认为，您的方法是正确的。 A component should be working independently from the context in which it is added. 组件应独立于其添加的上下文而工作。 You can pass anything as argument to the component within the template. 您可以将任何内容作为参数传递给模板中的组件。 I would recommend displaying the components depending on some type of model that is added with each addItem click (in my example, a simple text). 我建议根据每次addItem单击添加的某种模型类型显示组件（在我的示例中为简单文本）。 Why don't you try it this way: 您为什么不这样尝试：

JS JS

App = Ember.Application.create();

App.MyListComponent= Ember.Component.extend({
components: Ember.A([]),
layoutName:'my-list',
actions:{
    addItem:function(){
        var components = this.get('components');
        console.log(components);
        components.pushObject ('test'); // or whatever you want: could also be components.pushObject(App.MyListItemComponent.create()); if you want to use it later somehow. 
        this.set('components', components);
        console.log("add item action");
    },
},
});
App.MyListItemComponent= Ember.Component.extend({
layoutName:'my-list-item',
});

html html

<script type="text/x-handlebars" id="my-list">
<button {{action "addItem"}}>add item</button>
This is a holder:
<div id="holder">
    i am inside holder {{components.length}}
    {{#each components as |item|}}
        {{my-list-item}}
    {{/each}}

</div>

This is static item:
{{my-list-item}}

如何动态地将组件添加到另一个组件的div中？

问题描述

1 个解决方案

解决方案1
1 2015-12-17 17:29:12

如何动态地将组件添加到另一个组件的div中？

问题描述

1 个解决方案

解决方案1 1 2015-12-17 17:29:12

解决方案1
1 2015-12-17 17:29:12