Question

当我想尝试将组件添加到另一个组件中的div DOM时，我收到了错误。

未捕获错误：断言失败：您无法追加到现有的Ember.View。请考虑使用Ember.ContainerView。

这是我的JSBin

＆＃13;

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',
});

＆＃13;

html, body {
  margin: 20px;
}

＆＃13;

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

＆＃13;

你可以看看并告诉我该怎么办？

非常感谢

Answer 1

我不认为，你的方法是正确的。组件应独立于添加它的上下文。您可以将任何内容作为参数传递给模板中的组件。我建议显示组件，具体取决于每个addItem单击添加的某种类型的模型（在我的示例中，是一个简单的文本）。为什么不用这种方式尝试：

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

<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 个答案: