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

Question

我有一个名为 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

Answer 1

您的模板中需要一个 each 循环来生成多个输入。

为了让 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 数据。您可能正在收集姓名以将姓名列表保存在后端，Ember 数据是实现此目的的方法。

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

emberjs-2.0 dynamically add more component on click

ember.js

ember-components