javascript – knockout mapping>映射数组总是更新

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – knockout mapping>映射数组总是更新，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2960字，纯文字阅读大概需要5分钟。

内容图文

小提琴手：http://jsfiddle.net/u9PLF/

我得到了一个有嵌套孩子的父母名单.我定期更新整个对象层次结构并更新第一个父项的子数组一次.我遇到的问题是,似乎子数组总是被更新,或者至少它每次调用fromJS函数时都会通知订阅者.

我希望孩子们observableArray只通知订阅者一次(当它首先从[A,B]变为[A,B,C]时,而不是后续的呼叫).

我究竟做错了什么？

谢谢

码：

var data = {
    parents: [{
        id: 1,
        name: 'Scot',
        children: ['A', 'B']
    }]
};

function ParentVM(data) {
    var self = this;

    ko.mapping.fromJS(data, {}, self);

    self.count = ko.observable(0);

    self.hello = ko.computed(function () {
        console.log("Update", self.children());
        self.count(self.count() + 1);
    });
}

var mapping = {
    parents: {
        create: function (options) {
            return new ParentVM(options.data);
        },
        key: function (data) {
            return ko.utils.unwrapObservable(data.id);
        }
    }
};

var viewModel = ko.mapping.fromJS(data, mapping);
ko.applyBindings(viewModel);

setInterval(function () {

    var data = {
        parents: [{
            id: 1,
            name: 'Scott',
            children: ['A', 'B', 'C']
        }]
    };

    ko.mapping.fromJS(data, mapping, viewModel);
}, 2000);

viewModel.parents.subscribe(function () {
    console.log("Parents notif");
});

解决方法:

@Charlie是对的.这与ko.mapping无关,它是ko.observable如何测试值的相等性.

http://jsfiddle.net/C7wUb/

在此演示中,每次调用项目时都会更新项目([1,2])

var vm = {
    items: ko.observable([1,2]),
    count: ko.observable(0)
};

vm.items.subscribe(function(new_v) {
    console.log("items are updated to " + new_v);
    vm.count(vm.count() + 1);
});

ko.applyBindings(vm);

setInterval(function() {
    vm.items([1,2]);
}, 2000);

更深层次的原因是ko的equalityComparer的默认实现,它只比较原始类型.

// src/subscribables/observable.js
ko.observable['fn'] = {
    "equalityComparer": valuesArePrimitiveAndEqual
};

// src/subscribables/extenders.js
var primitiveTypes = { 'undefined':1, 'boolean':1, 'number':1, 'string':1 };
function valuesArePrimitiveAndEqual(a, b) {
    var oldValueIsPrimitive = (a === null) || (typeof(a) in primitiveTypes);
    return oldValueIsPrimitive ? (a === b) : false;
}

避免observableArray上不必要的更新事件的方法是覆盖equalityComparer.

http://jsfiddle.net/u9PLF/2/

var oldComparer = ko.observable.fn.equalityComparer;

ko.observable.fn.equalityComparer = function(a, b) {
    var i, toStr = Object.prototype.toString;
    if (toStr.call(a) === '[object Array]' && toStr.call(b) === '[object Array]') {
        if (a.length !== b.length) return false;
        for (i = 0; i < a.length; i++) {
            if (!oldComparer(a[i], b[i])) return false;
        }
        return true;
    } else {
        return oldComparer(a, b);
    }
};

(你也可以只为子目录observableArray覆盖equalityComparer,看看如何在src / subscribables / extenders.js中实现ko.extenders notify)

顺便说一下,你做self.hello = ko.computed(…)的方式有点危险.

self.hello = ko.computed(function () {
    console.log("Update", self.children()); // you want to notify self.hello when children change.
    self.count(self.count() + 1); // but self.hello also has dependency on self.count()
});

我想你想要的是一个简单的订阅,注册一个儿童改变事件的回调.

self.children.subscribe(function(new_v) {
    console.log("Update", new_v);
    self.count(self.count() + 1);
});

内容总结

以上是互联网集市为您收集整理的javascript – knockout mapping>映射数组总是更新全部内容，希望文章能够帮你解决javascript – knockout mapping>映射数组总是更新所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端