8

クリック イベントが発生した後にノックアウトを使用して入力にフォーカスを設定しようとしていますが、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。たとえば、カスタムノックアウトバインディングを使用して、これをきれいに行う方法はありますか?

4

2 に答える 2

4

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/

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

于 2013-05-28T08:33:26.890 に答える