0

I'm using Kendo UI (latest version) with Knockout-Kendo (0.6.3) and Knockout (2.3.0) and I have a complex situation with an autocomplete where I am attempting to map the input typed into the autocomplete field (a numeric string) to a complex data type on the backend in Javascript.

I don't think all the details are relevant at this point as my problem is understanding how to properly use a named Knockout template with any Kendo UI control other than a grid (because I have that one working). Essentially I'm trying to style the autocomplete suggestion dropdown based on the the input entered into the autocomplete.

Essentially I've tried this:

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

but this locks up and throws a javascript knockout error saying object does not support "replace".

I've also tried

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

and

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

The first one works to create a template but I cannot access any knockout data. The second one works with data but data is just the value I selected and I need access to associated ViewModel.

Make sense?

4

2 回答 2

0

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/

于 2014-12-16T05:35:01.580 回答
0

我不确定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());

于 2013-07-24T18:44:21.313 回答