带有 HTML 的 Kendo MVVM 模板下拉菜单答案

【问题标题】：Kendo MVVM Template Dropdown with HTML带有 HTML 的 Kendo MVVM 模板下拉菜单
【发布时间】：2015-06-12 03:34:09
【问题描述】：

我有一个剑道模板，我在其中绑定了一个剑道 DropDownList。我无法让 HTML 显示在下拉列表的文本中。

$(function() {
    var field = {
        DisplayValue : "Blue",
        OptionListDetails : [
            { Text : "<span style=\"color:#F00\">Red</span>", Value : "Red" },
            { Text : "<span style=\"color:#0F0\">Green</span>", Value : "Green" },
            { Text : "<span style=\"color:#00F\">Blue</span>", Value : "Blue" }
        ]};
  
    var fieldObservable = kendo.observable(field);
    var controlTemplate = kendo.template($("#dropdownTemplate").html());
    var view = new kendo.View(controlTemplate(fieldObservable), { model: fieldObservable, wrap: false });
    view.render($("#renderPlace"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet"/>
<link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet"/>
<script type="text/x-kendo-template" id="dropdownTemplate">
  <select data-bind="value: DisplayValue, source: OptionListDetails" data-role="dropdownlist" data-text-field="Text" data-value-field="Value" >
  </select>
</script>
<div id="renderPlace">

我可以通过某种绑定来使 HTML 工作吗？

【问题讨论】：

标签： kendo-mvvm kendo-template

【解决方案1】：

我是对的，解决方案涉及额外的绑定。我必须创建另一个模板并绑定 DropDownList 的 data-template 和 data-value-template 属性。

$(function() {
    var field = {
        DisplayValue : "Blue",
        OptionListDetails : [
            { Text : "<span style=\"color:#F00\">Red</span>", Value : "Red" },
            { Text : "<span style=\"color:#0F0\">Green</span>", Value : "Green" },
            { Text : "<span style=\"color:#00F\">Blue</span>", Value : "Blue" }
        ]};
  
    var fieldObservable = kendo.observable(field);
    var controlTemplate = kendo.template($("#dropdownTemplate").html());
    var view = new kendo.View(controlTemplate(fieldObservable), { model: fieldObservable, wrap: false });
    view.render($("#renderPlace"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet"/>
<link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet"/>
<script id="template" type="text/x-kendo-tmpl"> #=Text# </script>
<script type="text/x-kendo-template" id="dropdownTemplate">
  <select data-bind="value: DisplayValue, source: OptionListDetails" data-role="dropdownlist" data-text-field="Text" data-value-field="Value" data-value-primitive="true" data-template="template" data-value-template="template" >
  </select>
</script>
<div id="renderPlace">

【讨论】：