Custom binding no longer working in KnockoutJS 3.0

Question

All of the sudden, the following code no longer works when targeting KnockoutJS 3.0. How can I work around this?

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>

See fiddle: http://jsfiddle.net/ReQrz/1/

Maybe problem in your browser? In my FF 25.0.1 and GC 31.0 it works perfect. — alexmac, Nov 21 '13 at 01:04
Sometimes we put custom binding handlers in separate scripts. Consider running them when document is ready. Just try enclosing it with $(function(){}), if using jQuery — Daniel Conde Marin, Nov 21 '13 at 03:52

score 6 · Answer 1 · answered Nov 21 '13 at 07:47

In KO 3.0 the bindings are Independent and ordered. You can read more about this here, and this should be considered a "breaking change", from the above linked example:

v2.x’s behavior about dependencies between bindings (described in the section about “Independent and ordered bindings” above), is an undocumented internal implementation detail so hopefully you aren’t relying on it. But if you are relying on that then obviously you will see a change of behavior because bindings are independent in v3 by design. You’ll need to stop relying on cross-binding dependencies, which by the way will make your code much cleaner and easier to understand.

So you binding is not working anymore because it assumed that when your comment property is changed it fires also your limitCharacters binging altough your limitCharacters binding has nothing to do with the comment property.

One possible solution for fixing this that you need to explicitly declare a dependency on the value binding in your update handler by acessing its value with allBindingsAccessor().value();:

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

Demo JSFiddle.

+2; I got my friend to +1 it as well, this was so timely and useful. :) — Anthony Mills, May 01 '14 at 20:38

LostInComputer · Answer 2 · 2013-11-21T08:10:16.283

nemesv is completely right.

His modification is short and easy to read. One drawback of that though is the observable is called twice when in exceeds the limit.

If you don't want that, a solution is to create a custom value binder which derives from the original.

(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;
})();

Sample: http://jsfiddle.net/DAFN6/

Custom binding no longer working in KnockoutJS 3.0

2 Answers2