3

Consider the following trivial example:

<input data-bind="value: query, valueUpdate: 'afterkeydown'"/>

In knockoutjs 2.1.0, when I press any of ctrl,Up arrow,Down arrow,Shift the binding is not fired and query is not updated.

In knockoutjs 2.2.0, the binding fires for all the above keypresses.

This is playing havoc with some existing code (it's an autocomplete, and arrow up and down are frequently used to select from the drop down).

Which behaviour is correct? I assume technically, the latter is correct as these pressing these keys is a keydown event, but shouldn't the binding only fire if the value has changed?

I want to keep everything real-time, and the docs state:

"afterkeydown" is the best choice if you want to keep your view model updated in real-time

Suggestions?

2 Answers 2

3

I followed the subscribe method suggested above, but it seemed a little messy and not in the spirit of knockout. A colleague suggested writing an extender that would suppress the binding in the case of no change (which would emulate the 2.1 behaviour):

ko.extenders.suppressNoChange= function(target) {
    var result = ko.computed({
        read: target,
        write: function(newValue) {
            var current = target();
            if (newValue!== current) {
                target(newValue);
            }
        }
    });
    result(target());
    return result;
};

so now we can extend our computed observables such that the binding will not fire in the case where no change has occurred.

We can use it as follows:

ko
  .computed({
     read: function(){},
     write: function(v){})
  .extend({
     suppressNoChange: null
  });

and allows me to make very minimal changes to the 2.2 fiddle in the question to restore the 2.1 behaviour.

See http://jsfiddle.net/Rmcza/26/

0
1

I think this is a result of this change made by RP Niemeyer in Sept. It causes computed observables to always write when triggered, even if the value hasn't changed.

You will notice in this fiddle that this does not occur when using a non-computed observable. I tested this using an explicit subscription, and the event does not fire for the down arrow.

this.test = ko.observable('');
this.test.subscribe(function(newValue) {
    alert("The test value new name is " + newValue);
});

Maybe Ryan can explain why this was changed, and why computed's are behaving differently than regular observables in this case. You might want to make an issue on the GitHub page.

8
  • The behavior in 2.1 was really unintended. Here is the same fiddle with 2.0: jsfiddle.net/rniemeyer/4FDKC. My suggestion would be to use an observable with a subscription as described by @Tyrsius. Computeds often run logic within the write function that needs to happen whenever the binding is triggered. This caused an issue with several cases like the one described here: github.com/SteveSanderson/knockout/pull/562 Nov 22, 2012 at 14:06
  • @RPNiemeyer Um. A write occurs for me when I press down.
    – Kyeotic
    Nov 22, 2012 at 17:54
  • Can you clarify? In which version? With the computed or manual subscription? Nov 22, 2012 at 19:07
  • @RPNiemeyer In the fiddle you posted for 2.0. This one: jsfiddle.net/rniemeyer/4FDKC. Using Chrome if that makes a difference.
    – Kyeotic
    Nov 22, 2012 at 19:19
  • Thanks both. That's all the info I need to proceed.
    – spender
    Nov 22, 2012 at 20:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.