观察对象数组的属性是否有任何变化

Question

我正在使用 Aurelia，我有一个绑定到网格的项目数组，并且它们上面有一个选定的属性。我想绑定一个按钮，当其中任何一项为真时启用。我可以采用蛮力方法，我有一个 getter 过滤列表并返回所选项目，但这意味着我会在应用程序中不断进行脏检查，我不想那样做.我希望有一种更有效的方法。有什么想法吗？

Answer 1

您可以做的几件事 - 假设我有正确的用例：

脏检查（只有一个属性- 没什么大不了的）

export class Item {
  selected = false;
}

export class ViewModel {
  items = [new Item(), new Item(), new Item()];

  get anySelected() {
    var items = this.items, i = items.length;
    while(i--) {
      if (items[i].selected) {
        return true; 
      }
    }
    return false;
  }
}

观察物品

import {BindingEngine, inject} from 'aurelia-framework';

export class Item {
  selected = false;
}

@inject(BindingEngine)
export class ViewModel {
  items = [new Item(), new Item(), new Item()];    
  anySelected = false;
  subscriptions = [];

  constructor(locator) {
    this.bindingEngine = bindingEngine;
  }

  updateAnySelected() {
    var items = this.items, i = items.length;
    while(i--) {
      if (items[i].selected) {
        this.anySelected = true;
        return;
      }
    }
    this.anySelected = false;
  }

  activate() {
    var items = this.items, i = items.length, observer;
    while(i--) {
      observer = this.bindingEngine.propertyObserver(items[i], 'selected');
      subscriptions.push(observer.subscribe(() => this.updateAnySelected());
    }
    this.updateAnySelected();
  }

  deactivate() {
    let dispose;
    while(subscription = subscriptions.pop()) {
      subscription.dispose();
    }
  }
}

使用集合class

import {computedFrom} from 'aurelia-framework';

export class Item {
  _selected = false;

  constructor(parent) {
    this.parent = parent;
  }

  @computedFrom('_selected')
  get selected() {
    return this._selected;
  }
  set selected(newValue) {
    newValue = !!newValue;
    if (newValue === _selected) {
      return;
    }
    _selected = newValue;
    this.parent.itemChanged(newValue);
  }
}

export class Items {
  items = [];
  selectedCount = 0;
  anySelected = false;

  createItem() {
    let item = new Item(this);
    this.items.push(item);
    return item;
  }

  itemChanged(selected) {
    this.selectedCount += (selected ? 1 : -1);
    this.anySelected = this.selectCount > 0;    
  }
}

export class ViewModel {
  items = new Items();

  constructor() {
    let item = this.items.createItem();
    item = this.items.createItem();
    item = this.items.createItem();
  }
}

使用 `selectedItems` 数组而不是选定的布尔属性

export class ViewModel {
  items = [{}, {}, {}];
  selectedItems = [];

  selectItem(item) {
    this.items.push(item);
  }

  deselectItem(item) {
    this.items.splice(this.items.indexOf(item), 1);
  }
}

出于绑定目的，请使用 selectedItems.length 作为您的 "any selected" 属性

Answer 2

除了 Jeremy 的示例，您还可以创建自定义 setter，例如：

class Item {
   // this is your ~private~ field
  _isSelected = false;

  // in our constructor, we pass the view model and the property name
  constructor(vm, prop, name) {
    this.vm = vm;
    this.prop = prop;
    this.name = name;
  }

  get isSelected() {
    return this._isSelected;
  }
  // when you set the value, you increase the vm's property
  set isSelected(value) {
    if (value !== this._isSelected) {
      this.vm[this.prop] += value ? 1 : -1;
      this._isSelected = value;
    }
  }
}

export class MyViewModel
{
  items = [];
  itemsSelected = 0; // that's the property we'll pass to the class we've created

  constructor() 
  {
    for (let i = 0; i < 50; i++) {
      // instead of adding a annonymous {} here, we add an instance of our class
      this.items.push(new Item(this, 'itemsSelected', `Item ${i+1}`));
    }
  }

  toggleIsSelected(item) {
    item.isSelected = !item.isSelected;
  }
}

我为你创建了一个 plunker：http://plnkr.co/edit/OTb2RDLZHf5Fy1bVdCB1?p=preview

这样做，您将永远不会循环查看某些项目是否已更改。

Answer 3

我认为您也可以利用 EventAggregator，如图 here 所示。这样就不需要一直执行脏检查，而是在自己的VM中处理item选择事件并发布eventdata；另一端的订阅者将收听相同的内容并执行所需的体操。

但是，我从来没有使用过它，所以我不确定它的更深层次的细节。但是从文档来看它看起来很简单。

Answer 4

Jeremy 让我想到了这个 in this bug。所以看起来您还可以通过自定义绑定行为来刷新绑定。希望 Jeremy 可以确认我在这里没有做任何愚蠢的事情。

这样使用：

repeat.for="item of items | filter & array:'propertyName'"

它覆盖标准观察行为并观察数组和您在每个项目上定义的属性。它可能会被改进为更通用...

function observeProperty(obj, property) {
  this.standardObserveProperty(obj, property);
  let value = obj[property];
  if (Array.isArray(value)) {
    this.observeArray(value); 
    for(let each of value){   
      this.standardObserveProperty(each, this.propertyName); 
    }
  }
}

export class ArrayBindingBehavior {
  bind(binding, source, property) {
    binding.propertyName = property;
    binding.standardObserveProperty = binding.observeProperty;
    binding.observeProperty = observeProperty;
  }

  unbind(binding, source) {
    binding.observeProperty = binding.standardObserveProperty;
    binding.standardObserveProperty = null;
    delete binding.propertyName;
  }
}

观察对象数组的属性是否有任何变化

Observe property on an array of objects for any changes

javascript

aurelia

脏检查（只有一个属性- 没什么大不了的）

观察物品

使用集合class

使用 `selectedItems` 数组而不是选定的布尔属性

观察对象数组的 属性 是否有任何变化

Observe property on an array of objects for any changes

javascript

aurelia

脏检查（只有一个 属性- 没什么大不了的）

观察物品

使用集合class

使用 selectedItems 数组而不是选定的布尔属性

观察对象数组的属性是否有任何变化

脏检查（只有一个属性- 没什么大不了的）

使用 `selectedItems` 数组而不是选定的布尔属性