title: Knockout.js input focus after click
body: <p>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:</p>
  
  <pre><code>(function() {
  
      var vm = {
          text: ko.observable(),
          items: ko.observableArray([])
      }
  
      vm.addItem = function() { 
          vm.items.push(vm.text());
          vm.text(null);
      }
  
      ko.applyBindings(vm);
  
  }());
  </code></pre>
  
  <p>This is my DOM:</p>
  
  <pre><code>&lt;input type="text" data-bind="value: text" /&gt;
  &lt;a href="#" data-bind="click: addItem"&gt;Send&lt;/a&gt;
  
  &lt;ul data-bind="foreach: items"&gt;
      &lt;li data-bind="text: $data"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is the JsFiddle sample: <a href="http://jsfiddle.net/srJUa/1/">http://jsfiddle.net/srJUa/1/</a></p>
  
  <p>What I want it to set focus on the input after the <code>vm.addItem</code> is completed. Any idea how this can be done cleanly, for example with a custom knockout binding?</p>