Kendo UI Mobile = data-template using dot notation for MVVM declarative bindings

Question

I have since deleted my prior posts regarding this.

Is there a way I can use dot notation to access Kendo UI templates through a widget's data-template attribute? I know the attribute currently accepts an ID to a script tag which contains the template, but I would like to overload/overwrite its functionality to accept a variable source.

The reason for this is because my templates are not wrapped in script tags, but are html files that get brought in to my app using the requireJS lib.

Any help would be greatly appreciated.

Answer 1

No, there is no such way. Instead you have to specify the template imperatively through pure JavaScript.

Answer 2

I think what you're looking for would be relatively easy if kendo.initWidget would use kendo.parseOptions instead of a private reference to that function. You could still make those changes, but as it is, it may be easier to use a custom widget, as suggested by Petur.

Example

Your app object containing the template:

window.app = {
    template: {
        autoComplete: "this row: #= data #"
    }
}

The widget definition:

var autoCompleteWidget = (function (init) {
    return kendo.ui.AutoComplete.extend({
        options: {
            name: 'AutoComplete'
        },
        init: function (element, options) {
            var templateLocation = $(element).data("template-location");
            if (templateLocation) {
                options.template = (0, eval)(templateLocation);
            }
            init.call(this, element, options);
        }
    });

})(kendo.ui.AutoComplete.fn.init);
kendo.ui.plugin(autoCompleteWidget);

HTML (you could simply use data-template, but using a different attribute may be a useful reminder this is using a different approach and doesn't accept DOM ids):

<input data-role="autocomplete" 
 data-template-location="app.template.autoComplete" data-bind="source: data" />

(demo)