CODEWITHSUNDEEP
javascripttemplatesmvvmkendo-uikendo-mobile
TAS
TAS

Reputation: 383

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

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.

Upvotes: 0

Views: 548

Answers (2)

Lars Höppner
Lars Höppner

Reputation: 18402

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)

Upvotes: 1

Petur Subev
Petur Subev

Reputation: 20203

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

Upvotes: 0

Related Questions