是否可以将模板用于使用MVVM的Kendo UI下拉列表的显示文本

Question

我有一个Kendo UI下拉列表，它使用了Kendo MVVM功能：

<select id="SearchPicker"
         data-bind="source: LocationTypeDropDown, value: LocationType"
         data-role="dropdownlist"
         data-value-field="Code"
         data-text-field="Name"
         data-option-label="All"
         data-value-primitive="true"
         data-cascade-from="ddlSite"
         data-auto-bind="false">
</select>

但是对于项目的显示文本，确实我想要一个像Code - Name这样的格式，我想知道如何更改显示模板？

在MVC中，我知道有一个.ClientTemplate()方法可以让我编写.ClientTemplate("#=Code# - #=Name#")，但是当我使用MVVM功能时，我怎样才能实现这样的功能？

修改

除下拉列表项目选项外，是否可能是所选值（如下面的“橘子”） 也可以使用模板显示？ （“2 - 橘子”）

Answer 1

尝试使用此解决方案JSFiddle

var viewModel = kendo.observable({
    selectedProduct: null,
    onChange: function () {
        var selectedFruit = this.get("selectedFruit");
        alert("Id: " + selectedFruit.id + " - Name: " + selectedFruit.name);
    },
    fruits: new kendo.data.DataSource({
        data: [
            { id: 1, name: "Apples" },
            { id: 2, name: "Oranges" },
            { id: 3, name: "Bananas" }],
        schema: {
            model: {
                fields: {
                    id: { type: "number" },
                    name: { type: "string" }
                }
            }
        }
    })
});

kendo.bind("#example", viewModel);

<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>

<div id="example">
  <p>Kendo UI DropDownList</p>
   <select data-role="dropdownlist" 

     data-option-label="Select Item..."
  data-bind="value: selectedFruit,source: fruits, events: {
                                change: onChange
                              }" data-template="select-template" data-value-template="select-template" data-text-field="name" data-value-field="id">
  </select>

  <script id="select-template" type="text/x-kendo-template">
    <option value="#: id #">#: id # - #: name #</option>
  </script>
</div>