javascript - KendoUI 上传小部件模板

Question

我正在尝试自定义kendoUpload小部件使用的 HTML，但我无法让它工作。

我已经关注了他们网站上的演示，阅读了文档，但我仍然得到默认模板（也就是我的自定义模板没有得到任何应用）。

Javascript和模板：

$("#files").kendoUpload({
            async: {
                saveUrl: Configuration.BaseUrl + "/portaluserquote/SourceFileUpload",
                removeUrl: Configuration.BaseUrl + "/portaluserquote/RemoveSourceFileUpload",
                autoUpload: true
            },
            template:"<span class='k-progress'></span>"+
                "<div class='file-wrapper'>"+
                    "<span class='file-icon #=addExtensionClass(files[0].extension)#'></span>"+
                    "<h4 class='file-heading file-name-heading'>Name: #=name#</h4>"+
                    "<h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>"+
                    "<button type='button' class='k-upload-action'></button>"+
                "</div>",
            
            multiple: true
            
        });

生成的 DOM 的屏幕截图：

有任何想法吗？

Answer 1

您直接放置 HTML 而不是调用kendo.template它。根据文档，它应该是一个模板。：

$("#files").kendoUpload({
    async: {
        saveUrl: Configuration.BaseUrl + "/portaluserquote/SourceFileUpload",
        removeUrl: Configuration.BaseUrl + "/portaluserquote/RemoveSourceFileUpload",
        autoUpload: true
    },
    template:kendo.template("<span class='k-progress'></span>"+
        "<div class='file-wrapper'>"+
            "<span class='file-icon #=addExtensionClass(files[0].extension)#'></span>"+
            "<h4 class='file-heading file-name-heading'>Name: #=name#</h4>"+
            "<h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>"+
            "<button type='button' class='k-upload-action'></button>"+
        "</div>"),
    multiple: true
});

Answer 2

该问题与剑道版本有关。一旦我更新到最新版本，kendoUpload 的模板就起作用了。

我相信这个功能是后来添加的..