knockout.js - 正在重置具有绑定处理程序的可写计算 observable

Question

我正在尝试编写一个绑定处理程序，以简化 select 标记与对象的使用。

ko.bindingHandlers.objectSelect = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var interceptor = ko.computed({
            read: function() {
                return valueAccessor()[allBindingsAccessor().optionsValue]();
            },

            write: function(value) {
                valueAccessor()[allBindingsAccessor().optionsValue](value);
            }
        });

        ko.applyBindingsToNode(element, {
            value: interceptor
        });
    }
};

在这个小提琴http://jsfiddle.net/p8dn2d2n/2/如果你运行它，选择开始清理，即使使用 valueAllowUnset。

如果您评论第二个选择，一切都会按预期进行。

<select data-bind="
    value: current().val.id,
    valueAllowUnset: true,
    options: options,
    optionsValue: 'id',
    optionsText: 'name',
    optionsCaption: ' '">
</select>

<!-- Problem here -->
<select data-bind="
    objectSelect: current().val,
    valueAllowUnset: true,
    options: options,
    optionsValue: 'id',
    optionsText: 'name',
    optionsCaption: ' '">
</select>

<p><span data-bind="text: current().val.id" /></p>

<div>
    <button data-bind="click: click">New</button>
</div>

我在做什么错？

Answer 1

看起来这是一个订购问题。value绑定包含一个绑定列表，它必须在之后运行，例如 ：after: ['options', 'foreach']

将绑定移动到列表末尾或（更好地）添加此列表可以缓解您的问题。

ko.bindingHandlers.objectSelect = {
    after: ['options', 'foreach'],
    init: function(element, valueAccessor, allBindingsAccessor) {
        var interceptor = ko.computed({
            read: function() {
                console.log("hi");
                return valueAccessor()[allBindingsAccessor().optionsValue]();
            },

            write: function(value) {
                console.log("hi2", value);
                valueAccessor()[allBindingsAccessor().optionsValue](value);
            }
        });

        ko.applyBindingsToNode(element, {
            value: interceptor
        });
    }
};

http://jsfiddle.net/rniemeyer/ghpgc72t/