Question

我的目标是为select元素赋予id，迭代内部 {{each}}帮助者。

例如，第一个select应该有id UDF_CHAR_1，第二个有UDF_CHAR_2，然后继续

我将计算属性绑定到select的id属性。在计算属性中，我正在增加计数器。问题不是迭代地分配id，它将UDF_CHAR1分配给所有人。

我的猜测是计算出的属性计算一次。它不会被调用 {{each}}内的时间。

实现这一目标的任何解决方案？

Answer 1

你应该从ArrayController的内容创建一个新的集合，它计算每个项目的id：

App.IndexController = Ember.ArrayController.extend({
  contentWithIds:function(){
    var content = this.get('content') || [];
    return content.map(function(item, index) {
      item.id = "UDF_CHAR" + (index + 1);
      return item;
    });
  }.property('content.[]'),
});

工作小提琴：http://jsbin.com/EkitOgi/1/edit

Answer 2

我认为您很可能不希望使用select引用id元素，并且有更好的方法来完成您尝试的操作。如果您使用您要完成的任务更新问题或提出新问题，我们可能会以更“适合”框架的方式帮助解决问题。

但是，如果您真的想要这样做，您可以使用控制器上的计算属性来为每个id项更新每个项目所需的select：

annotatedItems: function() {
  return this.get('model').map(function(item, index, enumerable){
    item.id = "UDF_CHAR" + index;
    return item;
  });
}.property('model'),

这使用Array.map method向id数组中的每个元素添加model字段。然后，您将使用annotatedItems帮助程序遍历此{{#each}}计算属性，在此示例中，id元素可以item.id进行访问：

{{#each item in annotatedItems}}
  <select name="test" {{bind-attr id=item.id}} multiple>
    <option>{{item.title}}</option>
    <option>{{item.alias}}</option>     
  </select>
  <button name="button" {{action 'testClick'}}>Click</button>
{{/each}}

updated JSBin example

递增计算属性并在每次迭代中绑定到元素

2 个答案: