Question

在Ember.ArrayController中，我有一个.observes()的函数属性更改的整个模型数组的属性。

var FoosController = Ember.ArrayController.extend(Ember.Evented, {

    observesEachFooBar: function() {
        var foos = this.get('model');
        foos.forEach(function(foo) {
            //test if this foo has changed, then do something
        });
    }.observes('model.@each.bar'),

});

这里我手动测试其模型中的每个Foo。我怎么能避免这样做，只给个人（或少数）那已经改变了？

Answer 1

Ember使用SortableMixin执行此操作。你可以遵循相同的模式。

https://github.com/emberjs/ember.js/blob/v1.6.1/packages_es6/ember-runtime/lib/mixins/sortable.js#L247

        forEach(sortProperties, function(sortProperty) {
          addObserver(item, sortProperty, this, 'contentItemSortPropertyDidChange');
        }, this);
      }, this);
    }

    return this._super(array, idx, removedCount, addedCount);
  },

  insertItemSorted: function(item) {
    var arrangedContent = get(this, 'arrangedContent');
    var length = get(arrangedContent, 'length');

    var idx = this._binarySearch(item, 0, length);
    arrangedContent.insertAt(idx, item);
  },

  contentItemSortPropertyDidChange: function(item) {
    var arrangedContent = get(this, 'arrangedContent'),
        oldIndex = arrangedContent.indexOf(item),
        leftItem = arrangedContent.objectAt(oldIndex - 1),
        rightItem = arrangedContent.objectAt(oldIndex + 1),
        leftResult = leftItem && this.orderBy(item, leftItem),
        rightResult = rightItem && this.orderBy(item, rightItem);

    if (leftResult < 0 || rightResult > 0) {
      arrangedContent.removeObject(item);
      this.insertItemSorted(item);
    }
  },

Answer 2

Here is an example 使用addArrayObserver方法，以及arrayContentWillChange和arrayContentDidChange。

App.IndexController = Em.ArrayController.extend({
  initializer: function() {
    this.addArrayObserver({
      arrayWillChange: Em.K,
      arrayDidChange: function(observedObj, start, removeCount, addCount) {
        if(!removeCount && !addCount) {
          alert('Array item at ' +start+ ' updated');
        }
      }
    });
  }.on('init'),

  actions: {
    updateData: function() {
      this.get('content').arrayContentWillChange(3, 0, 0);
      this.set('content.3.foo', 'foo3-updated');
      this.get('content').arrayContentDidChange(3, 0, 0);
    }
  }
});

找出Ember ArrayController中更改的单个项目

2 个答案: