将 text/x-kendo-template 与嵌套 JSON 结合使用

Question

我从 Web 服务调用返回了以下 JSON 结构：

[
    {"Site_Metadata":
        [   
            {"Site":"Brady","Type_ID":1,"Locations":"Brady","Reads_Per_Day":2,"SR_Sites":"Brady"},
            {"Site":"Desert Peak 2","Type_ID":1,"Locations":"Desert Peak 2","Reads_Per_Day":2,"SR_Sites":"Desert Peak 2"}
        ]
    }
]

然后我使用下面的代码来显示“站点”：

<div id="View" data-role="view" data-init="Sites">
        <ul id="Sites"></ul>
</div>
<script>
        var app = new kendo.mobile.Application(document.body);
        function Sites()
        {
            var WebAPIDataSource = new kendo.data.DataSource({
                transport:{
                    read:{
                        url:"http://...",
                        dataType:"JSON"
                    }
                }

            });
            $("#Sites").kendoMobileListView({dataSource:WebAPIDataSource, template : $("#sites-template").html() });


        }
</script>


<script type="text/x-kendo-template" id="sites-template">
        #: Site #
</script>

不行！只有当我删除“Site_Metadata”级别时，它才会为我填充列表。

Answer 1

您的 Web 服务 return 对象是一个数组，而不是 JSON。因此，将您的列表视图数据源设置为：WebAPIDataSource[0].Site_Metadata

 $("#Sites").kendoMobileListView({
              dataSource:WebAPIDataSource[0].Site_Metadata, 
              template : $("#sites-template").html()
   });

Answer 2

我找到了。我必须在 DataSource 定义中添加架构名称。这是我所做的：

<body>

    <div id="View" data-role="view" data-init="Sites">
        <ul id="Sites"></ul>
    </div>
    <script>
        var app = new kendo.mobile.Application(document.body);
        function Sites()
        {
            var WebAPIDataSource = new kendo.data.DataSource({
                transport:{
                    read:{
                        url:"http://...",
                        dataType:"JSON"
                    }
                },
                schema:{
                    data:"Site_Metadata"
                }

            });

            $("#Sites").kendoMobileListView({dataSource:WebAPIDataSource, template : $("#sites-template").html() });


        }
    </script>


   <script type="text/x-kendo-template" id="sites-template">
        #:Site#
    </script> 
</body>

将 text/x-kendo-template 与嵌套 JSON 结合使用

Using text/x-kendo-template with Nested JSON

jquery

json

kendo-ui