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

14

Knockout 有一个用于操作焦点的内置绑定：“hasfocus”绑定。

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

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

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

演示JSFiddle。

于 2013-05-28T08:32:03.617 回答
4

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