Question

我试图在触发click事件后将注意力集中在具有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完成后将注意力集中在输入上。知道如何干净利落地完成这项任务，例如使用自定义淘汰赛绑定吗？

Answer 1

Knockout有一个用于操纵焦点的内置绑定：The "hasfocus" binding。

因此，您只需要在viewmodel上创建一个布尔属性，并将其绑定在输入上，如果要关注输入，则将属性设置为true。

或者在您的情况下，您可以直接绑定到您的text属性，因此当它没有任何文本时，它应该具有焦点：

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

演示JSFiddle。

Answer 2

好的，我已经通过利用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/

不确定这是否是最佳方式。

单击后Knockout.js输入焦点

2 个答案: