4

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

4

1 回答 1

9

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

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

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

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

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

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

于 2015-07-18T22:57:14.077 回答