Knockout.jsクリックフォーカス後にフォーカスを入力

Question

クリックイベントが発生した後にノックアウトで入力にフォーカスを設定しようとしていますが、DOMとの結合なしにそれを処理するきれいな方法を見つけることができませんでした。ここで私が持っているJSのコードは次のとおりです。

(function() { 

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

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

    ko.applyBindings(vm); 

}()); 

は、これが私の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> 

はJsFiddleのサンプルです：http://jsfiddle.net/srJUa/1/

私はそれが後に入力にフォーカスを設定したいどのようなvm.addItemが完成しました。カスタムノックアウトバインディングなど、これがきれいにどのようにできるか考えてみましょうか？

Answer 1

ノックアウトには、フォーカスを操作するためのビルトインバインディングがあります（The "hasfocus" binding）。

したがって、入力にフォーカスを当てたい場合は、ビューモデルにブール値プロパティを作成して入力にバインドし、プロパティをtrueに設定するだけです。

またはあなたの場合には、あなたの textプロパティに直接結合するので、それはそれが必要任意のテキストを持っていないときにフォーカスがあることができます。

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

デモJSFiddleを。

Answer 2

OK、私は結合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> 

ワーキングサンプル：http://jsfiddle.net/srJUa/2/

これが最善の方法であるかどうかわかりません、しかし、。