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

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

为每个循环迭代一些东西，创建一个范围：一个数组，其元素与所需的输入数量一样多：

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就是这样做的方式。

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

1 个答案: