Return key binding for Knockout.js

I’ve become a big fan of Knockout.js for building dynamic web interfaces. It’s one of the most “magical” frameworks I’ve seen since jQuery and Node.js, in that it’s great at what it does and makes building complex model/view interactions a breeze. Knockout provides a clean and quick event binding scheme, which allows you to work faster and write less code. However, making things faster and cleaner leads to… wanting even more speed and cleanliness!

So it was that I got tired of writing clunky controller scripts for managing text field input submission when the RETURN key is pressed. This seemed like an excellent opportunity to expand upon the Knockout framework to simplify this redundant task.

Here it is, just paste this into your project script somewhere after the Knockout.js include:

/**
* RETURN key binding for Knockout.js
*/
ko.bindingHandlers.returnKey = {
 init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
 ko.utils.registerEventHandler(element, 'keydown', function(evt) {
 if (evt.keyCode === 13) {
 evt.preventDefault();
 evt.target.blur();
 valueAccessor().call(viewModel);
 }
 });
 }
};

Once you’ve included that extension in your page’s JavaScript, you’ll now have a “returnKey” data binding available. You can use it like this:

<input type="text" data-bind="value:message, returnKey:send"/>
<button data-bind="click:send">Send</button>
That's it!
Advertisements

7 comments so far

  1. sxwalsh on

    Nice, very helpful!

  2. haddicus on

    Thanks for covering this, I was wondering how to do this without making a jQuery keypress event that would need to be added to my model… this is a lot more elegant and reliable. Thanks!

  3. victorantos on

    Thanks! handy code for my game nonstopwords.com

  4. Dan F on

    Very Nice! One small tweak if you want to take the current data item as a parameter

    Modify the init to take bindingContext as the last parameter like

    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

    Then modify the valueAccessor().call line to be

    valueAccessor().call(viewModel, bindingContext.$data);

    hey presto, your function you’re binding to can take an item parameter

  5. jnewcomb on

    In a few cases you don’t have to intercept keycode 13 to prevent the undesired effects of the ‘return’ key in a text input box. Have a look at the solution to this problem
    http://stackoverflow.com/questions/8652915/knockoutjs-submit-binding-not-handling-enter-key-properly

    ko rocks.. gone are the days of wiring up callbacks to GUI – and making spaghetti at the same time!

  6. Paul Musat on

    Thank you. You saved my day !

  7. max on

    this is great!! thank you so much!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: