Focus di input Knockout.js dopo il clic

Question

Sto cercando di mettere a fuoco un input con knockout dopo che l'evento click è stato attivato ma non è stato possibile trovare un modo pulito per gestirlo senza l'accoppiamento con il DOM. Ecco il codice JS che ho:

(function() { 

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

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

    ko.applyBindings(vm); 

}()); 

Questo è il mio 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> 

Ecco il campione JsFiddle: http://jsfiddle.net/srJUa/1/

Quello che voglio è per impostare il fuoco sull'ingresso dopo il vm.addItem è stato completato. Qualche idea su come questo possa essere fatto in modo pulito, ad esempio con un binding a eliminazione diretta personalizzato?

Answer 1

Knockout dispone di un'associazione integrata per la gestione dello stato attivo: The "hasfocus" binding.

Quindi è sufficiente creare una proprietà booleana sul proprio modello di visualizzazione e associarla al proprio input e impostare la proprietà su true se si desidera mettere a fuoco l'input.

o nel vostro caso è possibile legandosi direttamente alla vostra proprietà text, in modo che quando si è non ha alcun testo dovrebbe ha il focus:

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

Demo JSFiddle.

Answer 2

OK, ho risolto il problema sfruttando il legame hasfocus:

(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> 

campione di lavoro: http://jsfiddle.net/srJUa/2/

Non so se questo è il modo migliore, anche se.