Knockout.js Eingabefokus nach dem Klick

Ich versuche, setzen Sie den Fokus auf eine Eingabe mit ko nach dem click-Ereignis ausgelöst wird, konnte aber nicht finden eine saubere Art und Weise zu behandeln, ohne die Kopplung mit der DOM. Hier der JS code, den ich habe:

(function() {

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

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

    ko.applyBindings(vm);

}());

Dies ist mein 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>

Hier ist das JsFiddle-Beispiel: http://jsfiddle.net/srJUa/1/

Was ich will, setzen Sie den Fokus auf die Eingabe nach der vm.addItem abgeschlossen ist. Keine Ahnung, wie dieses getan werden kann, sauberer, zum Beispiel mit einem benutzerdefinierten ko-Bindung?

InformationsquelleAutor tugberk | 2013-05-28

14

Knockout hat einen built-in-Bindung für die Manipulation des Fokus: Die "hat_fokus" verbindlich.

So dass Sie nur brauchen zu erstellen eine boolean-Eigenschaft, die auf Ihrem viewmodel und binden Sie es auf Ihre Eingaben und setzen Sie die Eigenschaft auf true wenn Sie sich konzentrieren möchten, die Eingabe.

Oder in Ihrem Fall können Sie binden direkt an Ihre text - Eigenschaft, so dass, wenn es keine text sollte es den Fokus hat:
```
<input type="text" data-bind="value: text, hasfocus: !text()" />
```
Demo JSFiddle.
- danke!:) es hat gerade kam mir in den Sinn und ich löste es auf die gleiche Weise: jsfiddle.net/srJUa/2
InformationsquelleAutor nemesv

OK, ich habe das Problem gelöst, indem die Nutzung der hat_fokus Bindung:

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