Question

当我尝试以某种方式使用剑道模板时，我没有运气。我已经将kendoTreeView封装在jquery ui.plugin中。我有为树视图定义的模板，我试图先向小部件内的模板提供数据，然后再通过树视图的项目模板向模板提供更多数据。有没有办法做到这一点。

我知道我已经迷上了treeview图像脚本标签的模板定义->

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>"

特别是->

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

是否可以在小部件的初始化中提供#=data.imageRootUrl#，然后允许随后提供#: item.NodeImage #.png？

javascript小部件

(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);

当前，树状视图在呈现时如下所示：

检查员在F12中显示此内容：

Answer 1

如果模板未添加到HTML，我认为不需要脚本标签。另外，您应该转义不应从第一个模板求值的＃个字符。由于某种原因，href中的＃字符也需要转义很多：

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

使用格式而不是模板来添加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);

如何在也是控件模板的js小部件中向Kendo模板提供数据

1 个答案: