如何使用 Durandal/Knockout Startkit 搜索文本绑定？答案

【问题标题】：How to search-text binding with Durandal/Knockout Startkit?如何使用 Durandal/Knockout Startkit 搜索文本绑定？
【发布时间】：2013-08-22 16:44:48
【问题描述】：

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 的值。但我不确定。

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

【问题讨论】：

标签： knockout.js durandal

【解决方案1】：

搜索方法与 data-bind="submit:search" 绑定，但 KO 在使用 value 绑定时默认侦听输入上的 change 事件。

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

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

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

【讨论】：