使用 ko.mapping.fromJS 的意外行为

Question

我正在试验 ko.mapping.fromJS (http://knockoutjs.com/documentation/plugins-mapping.html)

鉴于下面的代码和期望，有人可以向我解释为什么实际输出不同吗？

var obj = { name: "frederick", minions: [{id:1, name:'Alice'},{id:2, name:'Bob'}] }
var model = {
    'minions': {
        key: function(data) { return ko.utils.unwrapObservable(data.id); }
    }
}

var vm = ko.mapping.fromJS(obj, model);

vm.name.subscribe(x=>console.log("Changed name"));
vm.minions.subscribe(x => console.log("changed minions"));
vm.minions()[0].id.subscribe(x => console.log("changed id [0]"));
vm.minions()[0].name.subscribe(x => console.log("changed name [0]"));
vm.minions()[1].id.subscribe(x => console.log("changed id [1]"));
vm.minions()[1].name.subscribe(x => console.log("changed name [1]"));

obj.minions[0].name = 'Charlie';

ko.mapping.fromJS(obj, vm);

预期的日志记录：

changed name [0]

实际记录：

changed name [0]
changed minions

问题： 由于没有向数组添加或删除记录，为什么我会看到“Changed minions”？这些事件是否总是冒泡，或者仅在数组和直接子对象（/行）的情况下？ （或者我在模型中犯了错误？我可以“修复”这个吗？）

Answer 1

幕后发生的事情是这样的：

var a = { a: 1 };
var b = { b: 2 };

var arr1 = [a, b];
var obsArray = ko.observableArray(arr2);
obsArray.subscribe(_ => console.log("change"));

var arr2 = [a, b];

// Logs change, since 
//  arr1 !== arr2
// even though:
//  arr1[0] === arr2[0] and
//  arr1[1] === arr2[1]
obsArray([a, b]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

我想说解决这个问题的最简单方法是检查您的订阅方法中的“平等”，但这主要是因为我不太了解映射插件......

如何解决：

• 创建一个辅助函数，该函数接受一个 observableArray 和一个回调函数。
• 帮助程序定义了一个equalityCheck，它将两个数组作为输入并返回true 或false
• 帮助程序创建对可观察对象的常规订阅，但仅在相等检查通过时才调用传递的回调。

要将传递给淘汰订阅的新值与前一个值进行比较，它需要存储对前一个值的引用。

这意味着你的语法将从：

vm.minions.subscribe(x => console.log("changed minions"));

到：

customSubscribe(vm.minions, x => console.log("changed minions"));

可能还有一种方法可以通过插件或扩展器解决此问题...

const obsArraySubThatChecksInner = (arr, cb) => {
  let prevValues = arr();

  // Check if items are equal without checking the array reference
  const equalityCheck = (arr1, arr2) => {
    return arr1.length === arr2.length &&
      arr1.every((item, i) => item === arr2[i]);
  }

  return arr.subscribe(newValues => {
    // Make a copy to prevent mutations in cb
    const newArray = newValues.slice();

    if (!equalityCheck(prevValues, newValues)) {
      cb(newValues);
    };

    prevValues = newArray;
  });
};


var obsArr = ko.observableArray([1, 2, 3]);

var regularSub = obsArr.subscribe(vals => console.log("Regular sub:", JSON.stringify(vals)));
var specialSub = obsArraySubThatChecksInner(
  obsArr, vals => console.log("Special sub:", JSON.stringify(vals))
);

// Is "similar", so will only trigger the regular sub.
obsArr([1, 2, 3]);

// Is different, so will trigger both
obsArr([1, 2]);
obsArr.push(3);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

在小提琴中处理您的数据：https://jsfiddle.net/nk074pb3/