使用 Knockout-Kendo 在 Kendo UI 自动完成控件中使用 Knockout 模板的正确方法

Question

我正在使用带有 Knockout-Kendo (0.6.3) 和 Knockout (2.3.0) 的 Kendo UI（最新版本），我遇到了一个复杂的自动完成情况，我试图将输入的输入映射到自动完成中字段（数字字符串）到 Javascript 后端的复杂数据类型。

我认为此时所有的细节都不是相关的，因为我的问题是理解如何正确使用命名的 Knockout 模板和网格以外的任何 Kendo UI 控件（因为我有那个可以工作）。本质上，我正在尝试根据输入到自动完成中的输入来设置自动完成建议下拉列表的样式。

基本上我已经尝试过了：

<input data-bind="kendoAutoComplete: { data: paymentSubCodeCodeList, value: paymentSubCodeCode, template: { name: 'mail_mailPaymentEntry-section_subcode-autocomplete', data: paymentSubCodeCode } }" />

但这会锁定并引发 javascript 敲除错误，说明对象不支持“替换”。

我也试过

template: $('#mail_mailPaymentEntry-section_subcode-autocomplete').html()

和

template: '<div>#: data #</div>'

第一个用于创建模板，但我无法访问任何剔除数据。第二个使用数据，但数据只是我选择的值，我需要访问关联的 ViewModel。

有意义吗？

Answer 1

我不确定 knockout-kendo 是否支持网格以外的东西的淘汰模板。

您可以编写自定义绑定来呈现模板

ko.bindingHandlers.myBinding = {
    update: function(element, valueAccessor, allBindingsAccessor) {
        var accessor = valueAccessor();
    //do cool stuff
        ko.renderTemplate("myTemplate", accessor, {}, element, 'replaceNode');
    }
};

如果剑道模板到期，这里有一个使用它们的例子：

http://jsfiddle.net/GQqwY/72/

---

已选择：

var ViewModel = function() {

this.choices = ko.observableArray([{ Id: 1, Name: 'Andrew' },{ Id: 2, Name: 'John' }, { Id: 3, Name: 'Doe' }]);

this.selectedChoice = ko.observable();

this.templ = kendo.template('<div style="color:blue">#= Name #</div>');

};

ko.applyBindings(new ViewModel());

Answer 2

Knockout 将接受您在实际小部件上提供的所有选项。

您可以包含一个模板选项，例如：

<input data-bind="kendoDropDownList: { dataTextField: 'name', dataValueField: 'id', data: choices, value: selectedChoice, template: '<span>Name: #: data.name # </span>' }" />

这是 Niemeyer 的一个例子：http://jsfiddle.net/rniemeyer/jgs9H/