Knockout.js input focus after click

Question

I am trying to set focus on an input with knockout after the click event is fired but couldn't find a clean way to handle it without coupling with the DOM. Here is the JS code I have:

(function() {

    var vm = {
        text: ko.observable(),
        items: ko.observableArray([])
    }

    vm.addItem = function() { 
        vm.items.push(vm.text());
        vm.text(null);
    }

    ko.applyBindings(vm);

}());

This is my DOM:

<input type="text" data-bind="value: text" />
<a href="#" data-bind="click: addItem">Send</a>

<ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
</ul>

Here is the JsFiddle sample: http://jsfiddle.net/srJUa/1/

What I want it to set focus on the input after the vm.addItem is completed. Any idea how this can be done cleanly, for example with a custom knockout binding?

Answer 1

Knockout has a built-in binding for manipulating the focus: The "hasfocus" binding.

So you just need to create a boolean property on your viewmodel and bind it on your input and set the property to true if you want to focus the input.

Or in your case you can binding directly to your text property, so when it is does not have any text it should has the focus:

<input type="text" data-bind="value: text, hasfocus: !text()" />

Demo JSFiddle.

Answer 2

OK, I have solved the issue by leveraging the hasfocus binding:

(function() {

    var vm = {
        text: ko.observable(),
        items: ko.observableArray([]),
        isFocused: ko.observable()
    }

    vm.addItem = function() { 
        vm.items.push(vm.text());
        vm.text(null);
        vm.isFocused(true);
    }

    ko.applyBindings(vm);

}());

HTML:

<input type="text" data-bind="value: text, hasfocus: isFocused" />
<a href="#" data-bind="click: addItem">Send</a>

<ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
</ul>

Working sample: http://jsfiddle.net/srJUa/2/

Not sure if this is the best way, though.