emberjs-2.0 在点击时动态添加更多组件答案

【问题标题】：emberjs-2.0 dynamically add more component on clickemberjs-2.0 在点击时动态添加更多组件
【发布时间】：2015-07-18 10:18:24
【问题描述】：

我有一个名为 display-me 的组件。我可以像in the jsfiddle 所示通过向该组件添加多个调用来将多个相同的组件添加到同一模板，如下所示：

  <script type="text/x-handlebars" data-template-name="index">
     {{display-me  action='add'}}
     {{display-me  action='add'}}
  </script>

但是，我想要的是一种情况，我可以单击一个按钮为组件添加第二个条目，而不是像上面那样手动添加它，因为我想使用单击并添加任意数量的条目。

我已将此操作添加到我的索引路由，但它不起作用：

 App.IndexRoute = Ember.Route.extend({
    actions: {
      add: function(){   

        var comp = App.__container__.lookup("component:display-me");

        //var comp = App.DisplayMeComponent.create();

        //comp.appendTo(".test");
        //comp.appendTo('#input'); 

        Ember.$(".test").append($('<div> {{display-me  action="add"}} </div>'));

      }
    }
  });

这里是完整的jsfiddle

【问题讨论】：

标签： ember.js ember-components

【解决方案1】：

您需要在模板中使用 each 循环来生成多个输入。

为每个循环遍历某些内容，创建一个范围：一个包含与所需输入数量一样多的元素的数组：

http://emberjs.jsbin.com/defapo/2/edit?html,js,output

但这没什么意义，因为您的所有输入都将绑定到相同的值。

为了有不同的值，创建并填充一个值数组：

names: ['James'],

actions: {
  add: function() {
    this.get('names').pushObject('John Doe');
  }
}

{{#each names key="@index" as |name|}}
  <p>  {{input value=name}} </p>
{{/each}}

这样更好，但在 Ember 中，您将很难处理原始字符串。一个例子是你需要这个奇怪的key="@index" 东西。

操作对象而不是原始字符串：

  people: [ Ember.Object.create({name: 'James'}) ],

  actions: {
    add: function(){   
       this
         .get('people')
         .pushObject(Ember.Object.create({name: 'John Doe'}));
    }
  }

{{#each people as |person|}}
  <p>  {{input value=person.name}} </p>
{{/each}}

演示：http://emberjs.jsbin.com/defapo/3/edit?html,js,output

下一步改进是使用 Ember Data。您可能正在收集名称以在后端保留名称列表，而 Ember Data 就是这样做的方法。

【讨论】：