上下文菜单的 KendoUI 模板答案

【问题标题】：KendoUI Template for Context Menu上下文菜单的 KendoUI 模板
【发布时间】：2014-10-23 21:56:51
【问题描述】：

我正在尝试将上下文菜单连接到 JSON 数据源，但我似乎无法设置模板。

如果我有这样的数据源（在文档中指定）

var dataSource = [{
    text: "hello",
    imageUrl: "pencil_icon.png",
    content: "I'm on the side"
}]

一切都很好，花花公子（我想它正在使用一些默认模板）

但是，如果我尝试使用自己的模板，一切都是未定义的。

<script type="text/x-kendo-template" id="contextMenuTemplate">
    <li data-action="#=onClickJavascript#"><img src="@Web_Helpers.StratosphereImageUrl("#=image#")" /> #=text#</li>
</script>

var dataSource = [{
            text: "bonjour",
            image: "@@Pencil_Icon",
            onClickJavascript: "alert('hello');"
}]

var menu = $("#contextMenu").kendoContextMenu({
               template: kendo.template($("#contextMenuTemplate").html()),
               dataSource: dataSource,

....

如何在剑道上下文菜单中使用模板？

【问题讨论】：

标签： kendo-ui kendo-contextmenu

【解决方案1】：

template 似乎实际上没有记录：http://docs.telerik.com/kendo-ui/api/javascript/ui/contextmenu

当我尝试使用它时，它似乎会去除元素并留下文本。 http://dojo.telerik.com/aSenu

我稍微浏览了一下源代码，但实际上并没有看到会使用template 选项的任何地方。鉴于它没有记录在案，我会认为它不能正常工作，因为它并不是真正要使用的。

【讨论】：

有趣的发现，谢谢。我会伸出援手，看看我能想出什么。谢谢！
它保留文本，因为这是数据源中使用的默认值。

【解决方案2】：

您可以将 HTML 推送到上下文菜单的 text 属性

$.each(data, function (key, value) {
    items.push({
        text: '<span data-action="' + value.OnClickJavascript + '">' + value.Text + '</span>',
        encoded: false,
        imageUrl: st.SharedContextMenuCommon.StratosphereGlobalImageUrl + value.Image
    });
});

【讨论】：