使用带有嵌套JSON的text / x-kendo-template

时间:2015-03-23 07:55:10

标签: jquery json kendo-ui

我从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”级别时,它才会为我填充列表。

2 个答案:

答案 0 :(得分:0)

您的Web服务返回对象是一个数组,而不是JSON。 因此,将list-view dataSource设置为:WebAPIDataSource[0].Site_Metadata

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

答案 1 :(得分:0)

我找到了。我不得不在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>