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

Question

我有一个名为display-me的组件.我可以将相同组件的多个添加到同名模板中,如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

您需要模板中的每个循环才能生成多个输入.

对于每个循环来迭代某些东西,创建一个范围:一个数组,其元素与所需的输入数量一样多:

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就是这样做的方法.