javascript - 点击后 Knockout.js 输入焦点

Question

我试图在触发点击事件后将焦点设置在带有 knockout 的输入上，但无法找到一种干净的方法来处理它而不与 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 完成后将焦点设置在输入上。知道如何干净地完成这件事吗，例如使用自定义 knockout 绑定(bind)？

Answer 1

Knockout 具有用于操纵焦点的内置绑定(bind):The "hasfocus" binding .

所以你只需要在你的 View 模型上创建一个 bool 属性并将它绑定(bind)到你的输入并将属性设置为 true 如果你想聚焦输入。

或者在你的情况下你可以直接绑定(bind)到你的 text 属性，所以当它没有任何文本时它应该有焦点:

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

演示 JSFiddle .