Question

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

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

如何找出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

有一种实现类似功能的黑客方法 - 如果列表项是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
    }
  }
});

当您在ember列表中观察时，如何找出更改的项目？

1 个答案:

替代方法