Как да обвържете текст за търсене с 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.

Когато обаче натиснете enter и изпратите формуляра за търсене, събитието change на вашето въвеждане не се задейства веднага, така че виждате „старата“ стойност.

Можете да коригирате това с помощта на valueUpdate: 'afterkeydown' (вижте документ), така че KO да актуализира вашия searchText като веднага щом напишете нещо:

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