使用简单的分层数据源在 Kendo TreeView 中设置显示名称答案

【问题标题】：Setting display names in a Kendo TreeView, with a simple hierarchical datasource使用简单的分层数据源在 Kendo TreeView 中设置显示名称
【发布时间】：2015-01-19 14:14:26
【问题描述】：

我在为我的父对象和子对象显示或映射 Kendo TreeView 的显示名称时遇到问题。

以下用作数据源的基本设置：

<div id="list-of-devices"</div>

// somewhere in my script
var inline = new kendo.data.HierarchicalDataSource({
    data: [
        {
            "DeviceGroupId": 1,
            "DeviceGroupName": "Superdeluxe Devices",
            "Devices": [
                {
                    "DeviceId": 1000,
                    "DeviceName": "My First Device"
                },
                {
                    "DeviceId": 1001,
                    "DeviceName": "My Second Device"
                }
            ]
        }
    ],
    schema: {
        model: {
            children: "Devices"
        }
    }

});

当我直接使用.kendoTreeview 函数初始化树视图时，它可以工作。像这样：

// initialize the treeview
$("#list-of-devices").kendoTreeView({
    dataSource: inline,
    dataTextField: ["DeviceGroupName", "DeviceName"]
});

这部分的神奇之处在于我为组和子项设置不同的 dataTextField 的最后一行代码。再次，这有效！

但是，如果我将其转换为 MVVM 示例，我不确定如何正确设置它。

MVVM 示例：

<div id="container">
    <div id="list-of-devices" class="devices"
         data-role="treeview"
         data-text-field="dataTextField" <!-- HOW TO DO THIS? -->
         data-bind="source: data">
     </div>
 </div>

var viewModel = kendo.observable({
    data: inline,
    dataTextField: ["DeviceGroupName", "DeviceName"] // <-- HOW TO DO THIS?
});

kendo.bind($("#container"), viewModel);

虽然它确实有效，例如不会引发错误，所有标签在我的树视图中都显示为“未定义”。

问题是：如何设置或绑定 dataTextField 以使树视图正确吐出组和子项的名称？

【问题讨论】：

标签： mvvm kendo-ui kendo-treeview

【解决方案1】：

基本上，您应该将其定义为：

<div id="list-of-devices" class="devices"
     data-role="treeview"
     data-text-field="['DeviceGroupName', 'DeviceName']"
     data-bind="source: data">
 </div>

您将data-text-field 设置为值，就好像它是一个JavaScript 数组但在引号之间。无需在您的 ObservableObject 中定义它。

在这里查看：http://jsfiddle.net/OnaBai/38pk73ty/

【讨论】：

太好了，就是这样！