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

问题：由于没有添加或删除数组的记录，为什么我会看到＆＃34;更改了minions＆＃34;？这些事件是否总是冒泡，或者仅在数组和直接子对象（/行）的情况下？（或者我在模型中犯了错误？我能解决这个问题吗？）

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
帮助程序创建对observable的常规订阅，但只有在相等检查通过时才调用传递的回调。

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

这意味着您的语法将从：

更改

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/

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

1 个答案: