Как выполнить привязку текста к поиску с помощью Durandal/Knockout Startkit?

Шаблон Durandal Startkit не содержит реализованного поиска (это нормально). Возможно, то, что он должен иметь, - это наблюдаемое свойство и его привязка. Я пытаюсь показать вам, как связать поисковый текст с этой демонстрацией, но он ищет неправильное значение (старое значение).

Вот ViewModel: Shell.js (из коробки)

define(['plugins/router', 'durandal/app'], function (router, app) {
    return {
        router: router,
        search: function() {
            app.showMessage('Search not yet implemented...');
        },
        activate: function () {
            router.map([
                { route: '', title:'Welcome', moduleId: 'viewmodels/welcome', nav: true },
                { route: 'flickr', moduleId: 'viewmodels/flickr', nav: true }
            ]).buildNavigationModel();

            return router.activate();
        }
    };
});

Я добавил наблюдаемое свойство: searchText и изменил функцию поиска, чтобы отобразить ее «значение»:

searchText: ko.observable(),
search: function() {
    app.showMessage('Search not yet implemented... Searching for: ' + this.searchText() );
},

и я привязал его к представлению: shell.html

<input type="text" class="search-query" placeholder="Search" data-bind="value: searchText">

Что-то не так, в поиске отображается старое значение, а не текущее. По-видимому, сначала выполняется функция поиска, а затем устанавливается/обновляется значение searchText. Но я не уверен.

Как мы можем решить эту проблему? (чтобы использовать последнее значение во время поиска)


knockout.js durandal
person Jaider    schedule 22.08.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Метод поиска связан с data-bind="submit:search", но KO по умолчанию прослушивает событие change на входах при использовании привязки value.

Однако, когда вы нажимаете ввод и отправляете форму поиска, событие change вашего ввода не срабатывает сразу, поэтому вы видите «старое» значение.

Вы можете исправить это с помощью valueUpdate: 'afterkeydown' (см. doc), поэтому KO обновит ваш searchText как как только вы что-то наберете:

<input type="text" class="search-query" placeholder="Search" 
       data-bind="value: searchText, valueUpdate: 'afterkeydown'">
person nemesv    schedule 22.08.2013