Kendo MVVM Template Dropdown с HTML

Question

У меня есть шаблон кендо, в котором я привязываю кендо 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 работать?

Answer 1

Ну, я был прав, что решение связано с дополнительными связями. Мне пришлось создать еще один шаблон и связать свойства data-template и data-value-template DropDownList.

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