敲除和可观察的阵列不匹配

时间:2013-11-29 00:33:23

标签: javascript knockout.js

考虑viewmodel中的以下属性

self.allValues = ko.observableArray();
self.selectedValues = ko.observableArray();

在编辑时,selectedValues包含来自数据库的值。问题在于:selectedValues包含allValues中包含的元素,但它们相同的实例。它们从属性值的角度来看是相同的,但实际上是不同的对象。

这导致每次敲除使用indexOf超过allValues使用来自selectedValues的对象始终无法找到对象。

我在selectedValues绑定上使用checked但未能检查此数组中包含的正确元素。

<div class="vars-list" data-bind="foreach: allValues">
    <input type="checkbox" data-bind="checkedValue: $data...(etc) 
       checked: selelectedValues"  />
</div>

敲除是否有任何方法可以通过属性值而不是内存地址来匹配对象?

1 个答案:

答案 0 :(得分:5)

使用自定义绑定是一种方法。这是使用比较函数的checked绑定的变体。

ko.bindingHandlers.checkedInArray = {
    init: function (element, valueAccessor, allBindings) {
        ko.utils.registerEventHandler(element, "click", function() {
            var observable = valueAccessor(), 
                array = observable(), 
                checkedValue = allBindings.get('checkedValue'), 
                isChecked = element.checked, 
                comparer = allBindings.get('checkedComparer');

            for (var i = 0, n = array.length; 
                i < n && !comparer(array[i], checkedValue); 
                ++i) { }

            if (!isChecked && i < n) {
                observable.splice(i, 1);
            } else if (isChecked && i == n) {
                observable.push(checkedValue);
            }
        });
    },
    update: function (element, valueAccessor, allBindings) {
        var array = valueAccessor()(), 
            checkedValue = allBindings.get('checkedValue'), 
            comparer = allBindings.get('checkedComparer');

        for (var i = 0, n = array.length;
            i < n && !comparer(array[i], checkedValue); 
            ++i) { }

        element.checked = (i < n);
    }
};

jsFiddle:http://jsfiddle.net/mbest/4mET9/