1

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();
        }
    };
});

我添加了 observable 属性：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 的值。但我不确定。

我们如何解决这个问题？（在搜索过程中使用最新值）

4

1 回答 1

1

搜索方法是连线的，但 KO 默认情况下在使用绑定时data-bind="submit:search"监听输入上的事件。changevalue

但是，当您按 Enter 并提交搜索表单时，您的输入change事件不会立即触发，因此您会看到“旧”值。

您可以使用valueUpdate: 'afterkeydown'（请参阅doc）修复此问题，这样 KO 将searchText在您输入内容后立即更新您：

<input type="text" class="search-query" placeholder="Search" 
       data-bind="value: searchText, valueUpdate: 'afterkeydown'">
于 2013-08-22T19:04:25.900 回答