knockout.js - Kendo-Knockout - 如何将自动完成绑定(bind)到远程数据？

Question

我使用 Kendo-Knockout。

我正在尝试让自动完成功能绑定(bind)到远程数据。 使用 http://rniemeyer.github.com/knockout-kendo/web/AutoComplete.html 中的基本示例我已经尝试过以下方法。但是，直到输入失去焦点后，搜索才会更新。

“搜索”仅查找 observableArray 中已经的内容。

Kendo 自动完成提供的唯一事件是“change”，它同样仅在输入失去焦点后触发。

如何拦截按键并访问 search() 的值以便进行远程调用？

此外，选择项目后如何访问“id”的值？

谢谢 杰里米

<strong><p style="margin-top: 100px;" data-bind="text: search"></p></strong>

<input data-bind="kendoAutoComplete: { data: choices, value: search,  
dataTextField: 'name',  valueUpdate: 'afterkeydown' }" />

<script type='text/javascript'>
$(function () {
    var myViewModel = function () {
        var self = this;
        this.choices = ko.observableArray([
            { id: "1", name: "apple" },
            { id: "1", name: "apple2" },
            { id: "1", name: "apple3" },
            { id: "2", name: "orange" },
            { id: "3", name: "banana" }
        ]);

        this.selectedChoice = ko.observable();

        self.search = ko.observable();

        self.search.subscribe(function() {
            console.log(self.search());
            // would send search to $.ajax to get the remote data
        });
    };

    ko.applyBindings(new myViewModel());
});

Answer 1

可以做这样的事情:

<input data-bind="kendoAutoComplete: { 
                    data: {}, 
                    minLength: 3, 
                    dataTextField: 'Name',
                    dataSource: {
                        type: 'odata',
                        serverFiltering: true,
                        serverPaging: true,
                        pageSize: 20,
                        transport: {
                            read: 'http://odata.netflix.com/Catalog/Titles'
                        }
                    }, 
                    value: selectedChoice }" />

您可以将其存储在 JavaScript 对象中并指向它。

示例:http://jsfiddle.net/rniemeyer/m8vVA/