当您在 ember 中观察列表时，如何找出哪个项目发生了变化？

Question

在我的 component.js 中，我正在观察下面的组件属性..

valueObserver : function(){
  console.log('which item changed??')
}.observes('list.@each.isChecked'),

我如何找出哪个 Item isChecked 发生了变化？

---

完整的组件代码如下

Ember.Component.extend({
  user: undefined,
  list: undefined,
  init: function() {
    this._super();
  },
  visibilityChanged: function() {
    if(this.get('isVisible')) {
      var _this = this;
      var account = this.get('accountService').get('account');

      this.get('user').getLists(account.get('uid'))
        .then(function(response) {
          var items = response.map(function(item) {
            item.isChecked = false
            return item;
          });
           _this.set('list', items);
        });
    }
  }.on('init').observes('isVisible'),

  valueObserver : function(){
    this.get('list').forEach(function(item) {
      if (item.get('isDirty')) {
        // Item has changed
      }
    });
  }.observes('list.@each.isChecked')
});

Answer 1

有一种实现类似功能的 hacky 方法 - 如果列表项是 Ember 模型，您可以查找哪些项是“脏的”（即它们的内容已被用户更改但未保存）。

valueObserves: function() {
  this.get('list').forEach(function(item) {
    if (item.get('isDirty')) {
      // Item has changed
    }
  });
}.observes('list.@each.isChecked'),

但是，我不推荐这种方法，因为它会损害不必要的性能，并且用例有限。

相反，正如 Oren 建议的那样，您可能应该在组件中或代替组件中使用诸如集合视图之类的东西。该集合视图将为每个列表项提供一个项目视图。在项目中，您可以观察isChecked 并向组件发送操作（或只是调用组件上的方法）并传递项目视图的内容（列表项）。

替代方法

另一种方法是使用操作来设置 isChecked 属性。

{{#each item in list}}
  // This could even be a checkbox with the checked attr bound
  <button {{action 'toggleCheck' item}}>Icon</button>
{{/each}}

这会将项目发送到您的控制器，您可以在其中设置 isChecked 并且您可以立即访问该项目：

Ember.ArrayController.extend({
  actions: {
    toggleCheck: function(item) {
      item.toggleProperty('isChecked');
      // Now do whatever you wanted to do
    }
  }
});