Question

我有一个共享点列表，顶部有一个搜索框。我只是在搜索框中输入任何内容后加载数据，我无法弄清楚原因。它使用Knockout

HTML：

<input placeholder="Search…" id="searchInput" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off">
   <tbody data-bind="foreach: ideas">

    <tr>
        <td></td>
        <td data-bind="text: $data.IdeaNumber"></td>
        <td data-bind="text: $data.IdeaTitle"></td>
        <td data-bind="text: $data.IdeaStatusValue"></td>
        .....
        <td></td>
    </tr>

</tbody>

视图模型：

var viewmodel = {
    query: ko.observable("")
    };

viewmodel.ideas = ko.dependentObservable(function() {
        var search = this.query().toLowerCase();
        return ko.utils.arrayFilter(ideaArray, function(idea) {
            return idea.IdeaTitle.toLowerCase().indexOf(search) >= 0;
        });
    }, viewmodel);

任何建议都会很棒，谢谢。

Answer 1

这是因为您输入的设置：

data-bind="value: query, valueUpdate: 'keyup'"

以下Update被设置为keyup事件，仅在输入一些数据后才会触发。

请参阅Knockout documentation以获取所有可能的值：

input - 当<input>或<textarea>元素的值发生变化时，更新您的视图模型。请注意，此事件仅由相当现代的浏览器引发（例如，IE 9 +）。
keyup - 在用户发布密钥时更新您的视图模型
keypress - 在用户键入密钥时更新您的视图模型。与keyup不同，这会在用户按住键时重复更新
afterkeydown - 用户开始输入字符后立即更新您的视图模型。这可以通过捕获浏览器的keydown事件并异步处理事件来实现。这在某些移动浏览器中不起作用。

如果您希望最初在文本框中显示某些值，则可以更改viewmodel：

var viewmodel = {
  query: ko.observable("Search here...") // will populate the textbox
};

为什么表格数据仅在搜索框中输入搜索后加载？

1 个答案: