如何使用Kendo DataSource与模板展示嵌套在单个键中的数据？

嗨，这个场景我太熟了！当JSON数据不是直接的数组，而是嵌套在某个单独的键（比如你例子里的products）里时，只需要在Kendo DataSource的配置里加个schema.data属性，就能轻松解决问题。

具体操作步骤： #

1. 配置DataSource时指定数据路径
   在创建DataSource的时候，通过schema对象的data字段，明确告诉Kendo要从哪个键里读取实际的数组数据。比如你的数据结构是{"products": [...]}，就把data设为"products"：

   var productDataSource = new kendo.data.DataSource({
     // 如果是本地数据就直接写data，如果是远程数据就用transport.read.url配置接口地址
     data: {
       "products": [
         { "ProductID": 1, "ProductName": "Chai", "UnitPrice": 18, "UnitsInStock": 39, "Discontinued": false },
         { "ProductID": 2, "ProductName": "Chang", "UnitPrice": 19, "UnitsInStock": 17, "Discontinued": false },
         { "ProductID": 3, "ProductName": "Aniseed Syrup", "UnitPrice": 10, "UnitsInStock": 13, "Discontinued": false }
       ]
     },
     schema: {
       data: "products" // 关键：指定嵌套数组对应的键名
     }
   });
   

2. 模板写法和之前完全一致
   完成上面的配置后，不管你用Grid、ListView还是其他Kendo组件，模板里访问属性的方式和直接用数组数据源时没有区别，比如：

   <!-- 以ListView模板为例 -->
   <script type="text/x-kendo-template" id="productTpl">
     <div class="product-item">
       <h4>#: ProductName#</h4>
       <p>单价: $#: UnitPrice# | 库存: #: UnitsInStock#</p>
     </div>
   </script>
   

原理说明： #

schema.data的作用就是帮Kendo DataSource“定位”到实际的数据集合——它会从返回的JSON对象中提取指定键对应的数组，作为组件要渲染的数据源。不管是本地数据还是远程接口返回的JSON，这个配置都能正常生效，非常实用！

内容的提问来源于stack exchange，提问作者Sruj