javascript - 仅为新条目或已删除条目订阅可观察数组

Question

所以是的，我可以订阅一个可观察的数组：

vm.myArray = ko.observableArray();
vm.myArray.subscribe(function(newVal){...});

问题是newVal传递给函数的是整个数组。无论如何我只能得到增量部分吗？说添加或删除的元素？

Answer 1

从 KnockoutJS 3.0 开始，ko.observableArray 上有一个arrayChange 订阅选项。

var myArray = ko.observableArray(["Alpha", "Beta", "Gamma"]);

myArray.subscribe(function(changes) {

    // For this example, we'll just print out the change info
    console.log(changes);

}, null, "arrayChange");

myArray.push("newitem!");

在上面的回调中，更改参数将是一个更改对象数组，如下所示：

[ 
   { 
      index: 3, 
      status: 'added', 
      value: 'newitem!' 
   }
]

对于您的具体问题，您希望收到有关新项目或已删除项目的通知。要使用 Knockout 3 实现它，它看起来像这样：

myArray.subscribe(function(changes) {

    changes.forEach(function(change) {
        if (change.status === 'added' || change.status === 'deleted') {
            console.log("Added or removed! The added/removed element is:", change.value);
        }
    });

}, null, "arrayChange");

Answer 2

由于我在其他地方找不到关于此的任何信息，我将添加一个关于如何将其与 TypeScript 一起使用的回复。

这里的关键是使用 KnockoutArrayChange 接口作为订阅的 TEvent。如果您不这样做，它将尝试使用另一个（非通用）订阅，并会抱怨状态、索引和值不存在。

class ZoneDefinition {
    Name: KnockoutObservable<String>;
}

class DefinitionContainer
{
    ZoneDefinitions: KnockoutObservableArray<ZoneDefinition>;
    constructor(zoneDefinitions?: ZoneDefinition[]){
        this.ZoneDefinitions = ko.observableArray(zoneDefinitions);
        // you'll get an error if you don't use the generic version of subscribe
        // and you need to use the KnockoutArrayChange<T> interface as T
        this.ZoneDefinitions.subscribe<KnockoutArrayChange<ZoneDefinition>[]>(function (changes) {
            changes.forEach(function (change) {
                if (change.status === 'added') {
                    // do something with the added value
                    // can use change.value to get the added item
                    // or change.index to get the index of where it was added
                } else if (change.status === 'deleted') {
                    // do something with the deleted value
                    // can use change.value to get the deleted item
                    // or change.index to get the index of where it was before deletion
                }
            });
        }, null, "arrayChange");
}

Answer 3

为了只检测push()和remove()事件，而不是移动项目，我在这些可观察数组函数周围放置了一个包装器。

var trackPush = function(array) {
    var push = array.push;
    return function() {
        console.log(arguments[0]);
        push.apply(this,arguments);
    }
}
var list = ko.observableArray();
list.push = trackPush(list);

原始的 push 函数存储在一个闭包中，然后被一个包装器覆盖，它允许我在推送项目之前或之后对它做任何我想做的事情，它被推送到数组上。

的类似模式remove()。

Answer 4

我正在使用类似但不同的方法，跟踪元素是否已在元素本身中检测：

myArray.subscribe(function(array){
  $.each(array, function(id, el) {
    if (!el.instrumented) {
      el.instrumented = true;
      el.displayName = ko.computed(function(){
        var fn = $.trim(el.firstName()), ln = $.trim(el.lastName());
        if (fn || ln) {
          return fn ? (fn + (ln ? " " + ln : "")) : ln;
        } else {
          return el.email();
        }
      })
    }
  });
})

但这真的很乏味，并且在我的代码中重复了这种模式

Answer 5

据我所知没有。想知道我是做什么的吗？我使用以前的变量来保存值，称为selectedItem

vm.selectedItem = ko.observable({});
function addToArray(item) { vm.selectedItem(item); vm.myArray.push(item); }

这样，当我的可观察数组发生问题时，我知道添加了哪个项目。

vm.myArray.subscribe(function(newArray) { var addedItem = vm.selectedItem(item); ... }

这真的很冗长，假设您的数组包含多种数据，您将需要某种标志来帮助您知道如何处理已保存的变量......

vm.myArray.subscribe(function(newArray) {
  if ( wasUpdated )
    // do something with selectedItem
  else
    // do whatever you whenever your array is updated
}

需要注意的重要一点是，如果您知道是否使用push或unshift使用过，您可能知道添加了哪个项目。只需浏览数组的最后一项或第一项，瞧。

Answer 6

尝试vm.myArray().arrayChanged.subscribe(function(eventArgs))

添加项目时具有附加值，删除项目时具有删除值。