How to supply data to Kendo templates in a js widget that is also a template for a control

Question

I am having no luck when I try to work with with kendo templates in a certain way. I have encapsulated a kendoTreeView in a jquery ui.plugin. I have templates defined for the treeview and I am trying to supply data to the template inside the widget first and then after that supply more data to the template via the treeview's item template. Is there a way to do this.

I know I am getting hung up in the template definition for the treeview image script tag-->

navScriptTemplate: "<script id='myReusableTreeviewTemplate' type='text/kendo-ui-template'><img src='#=data.imageRootUrl##: item.NodeImage #.png'/> <a href='\#' id= '' class='entity-link' >#: item.NodeText #</a></script>"

in particular -->

<img src='#=data.imageRootUrl##: item.NodeImage #.png'

Is it possible to supply #=data.imageRootUrl# in my widget's init and then allow the #: item.NodeImage #.png to be subsequently supplied?

javascript widget

(function ($) {

    var kendo = window.kendo,
    ui = kendo.ui,
    Widget = ui.Widget;

    var myReusableTreeview = Widget.extend({

        init: function (element, options) {
            var that = this;
            Widget.fn.init.call(this, element, options);
            that._create();
        },
        options: {
            imageRootUrl: "",
            serviceRootUrl : "",
            name: "myReusableTreeview "
        },

        _create: function () {
            var that = this;
            ...

            template = kendo.template(that._templates.divTreeView);
            that.divTreeview = $(template({ id: "treeview1" }));
            ... 

            that.ds1 = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: that.options.serviceRootUrl,
                    dataType: "json",
                    data: addData1,
                }
                },
                schema: {
                    model: {
                        id: "NodeID",
                        hasChildren: "HasChildren"
                    }
                }
            });  
            ...
            template = kendo.template(that._templates.navScriptTemplate);
            that.navScriptTemplate = $(template({ imageRootUrl: that.options.imageRootUrl }));
            that.element.append(that.navScriptTemplate);

            $(that.divTreeview1).kendoTreeView({
                dataSource: that.ds1,
                dataTextField: "NodeText",
                template: kendo.template($(that.navScriptTemplate).html())
        });  

        },
        _templates: {
            divWrapper: "<div style='overflow:auto;clear:both;'><div class='treeviewAttach'></div></div>",
            divAttach: "<div></div>",
            divTreeView : "<div id='#=data.id#' style='float: left;position: relative;width: 300px;min-height: 510px;margin: 0;padding: 0;'></div>",
            navScriptTemplate: "<script id='myReusableTreeviewTemplate' type='text/kendo-ui-template'><img src='#=data.imageRootUrl##: item.NodeImage #.png'  alt=''/> <a href='\#' id= '' class='entity-link' >#: item.NodeText #</a></script>"      
        }
    });
    ui.plugin(myReusableTreeviewTemplate);
})(jQuery);

Currently, the treeview looks as follows when rendered:

The inspector shows this in F12:

Answer 1

I don't think that you need the script tag if the template is not added to the HTML. Also you should escape the # characters that should not be evaluated from the first template. For some reason the # character in the href also needs quite a bit of escaping:

"<img src='#=data.imageRootUrl#\\#: item.NodeImage \\#.png'  alt=''/> <a href='\\\\\\#' id= '' class='entity-link' >\\#: item.NodeText \\#</a>"

It might also be simpler to use format instead of template to add the imageRootUrl:

"<img src='{0}#: item.NodeImage #.png'  alt=''/> <a href='\\#' id= '' class='entity-link' >#: item.NodeText #</a>"

that.navScriptTemplate = kendo.format(that._templates.navScriptTemplate, that.options.imageRootUrl);