Фокус ввода Knockout.js после клика

Я пытаюсь установить фокус на входе с нокаутом после запуска события щелчка, но не смог найти чистый способ справиться с ним без связи с 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);

}());

Это мой ДОМ:

<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
person tugberk    schedule 28.05.2013    source источник

Ответы (2)


arrow_upward
14
arrow_downward

В Knockout есть встроенная привязка для управления фокусом: привязка "hasfocus".

Таким образом, вам просто нужно создать логическое свойство в вашей модели представления и привязать его к вашему вводу и установить для свойства значение true, если вы хотите сфокусировать ввод.

Или в вашем случае вы можете напрямую привязываться к своему свойству text, поэтому, когда у него нет текста, он должен иметь фокус:

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

Демонстрация JSFiddle.

person nemesv    schedule 28.05.2013
comment
спасибо! :) это только что пришло мне в голову, и я решил это так же: jsfiddle.net/srJUa/ 2 - person tugberk; 28.05.2013

arrow_upward
4
arrow_downward

Хорошо, я решил проблему, используя привязку 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/

Хотя не уверен, что это лучший способ.

person tugberk    schedule 28.05.2013