点击后Knockout.js输入焦点答案

【问题标题】：Knockout.js input focus after click点击后Knockout.js输入焦点
【发布时间】：2013-05-28 08:26:10
【问题描述】：

我试图在点击事件触发后将焦点设置在带有敲除的输入上，但在不与 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 完成后将焦点放在输入上。知道如何干净地完成此操作，例如使用自定义敲除绑定吗？

【问题讨论】：

标签： javascript knockout.js knockout-2.0

【解决方案1】：

Knockout 具有用于操作焦点的内置绑定：The "hasfocus" binding。

因此，您只需要在视图模型上创建一个布尔属性并将其绑定到您的输入，并将该属性设置为true，如果您想关注输入。

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

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

演示JSFiddle.

【讨论】：

谢谢！:) 我刚想到它，我用同样的方法解决了它：jsfiddle.net/srJUa/2

【解决方案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/

但不确定这是否是最好的方法。

【讨论】：