自定义绑定不再适用于KnockoutJS 3.0

Question

突然之间，以下代码在定位KnockoutJS 3.0时不再有效。 我该如何解决这个问题？

JavaScript的：

ko.bindingHandlers.limitCharacters = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel)
    {
       element.value = element.value.substr(0, valueAccessor());
       allBindingsAccessor().value(element.value.substr(0, valueAccessor()));
    }
};

HTML：

<textarea data-bind="value: comment, valueUpdate: 'afterkeydown', limitCharacters: 20"></textarea>

见小提琴： http ： //jsfiddle.net/ReQrz/1/

Answer 1

在KO 3.0中，绑定是独立的并且是有序的。 您可以在这里阅读更多相关信息，这应该被视为一个“突破性变化”，来自上面的链接示例：

v2.x关于绑定之间依赖关系的行为（在上面的“独立和有序绑定”一节中描述）是一个未记录的内部实现细节，所以希望你不依赖它。 但是如果你依赖于那么显然你会看到行为的改变，因为绑定在v3中是独立的设计。 您需要停止依赖交叉绑定依赖项，这样可以使您的代码更清晰，更易于理解。

所以你的绑定不再起作用了，因为它假设当你的comment属性被改变时它也会触发你的limitCharacters你的limitCharacters绑定与comment属性无关。

解决此问题的一种可能解决方案是，您需要通过使用allBindingsAccessor().value();其值来显式声明update处理程序中value绑定的依赖关系allBindingsAccessor().value(); ：

ko.bindingHandlers.limitCharacters = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel)
    {
       var val = allBindingsAccessor().value();       
       allBindingsAccessor().value(val.substr(0, valueAccessor()));
    }
};

演示JSFiddle 。

Answer 2

nemesv是完全正确的。

他的修改简短易读。 然而，一个缺点是当超过极限时，可观察到被调用两次。

如果您不想这样，解决方案是创建一个源自原始的自定义值绑定器。

(function() {
    var limitValueBindingHandler = {};

    var valueBindingHandler = ko.bindingHandlers.value;
    for(var attr in valueBindingHandler) {
        if (valueBindingHandler.hasOwnProperty(attr)) {
            limitValueBindingHandler[attr] = valueBindingHandler[attr];
        }
    }

    limitValueBindingHandler.init = function(element, valueAccessor, allBindings) {
        var limitCharacters = allBindings.get("limitCharacters");

        element.addEventListener("keydown", function() {
            setTimeout(function() {
                //this is called after the element's value is updated
                //but before value binding event handler
                element.value = element.value.substr(0, limitCharacters);
            }, 0);
        }, false);

        valueBindingHandler.init(element, valueAccessor, allBindings);
    }

    ko.bindingHandlers['limitValue'] = limitValueBindingHandler;
})();

示例： http ： //jsfiddle.net/DAFN6/