Question

http://demos.telerik.com/kendo-ui/mobile/listview/pull-with-endless.html参考此演示，我们正在为我们的移动应用程序创建kenolistview。

我们在jSon中从webapi获取数据，当我们尝试使用列表视图绑定数据时它会给出错误我们尝试了三种方法但都没有工作，请查找下面的代码和错误代码。

<body>
<div data-role="view" data-init="mobileListViewPullWithEndless" data-title="Pull to refresh">
    <header data-role="header">
    <div data-role="navbar">
        <span data-role="view-title"></span>
        <a data-align="left" data-icon="add" data-role="button"  data-rel="modalview" href="#modalview-add"></a>
        <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
    </div>
</header>
    <ul id="pull-with-endless-listview">
    </ul>
</div>
<div data-role="modalview" id="modalview-add" style="width: 95%; height: 12em;">
    <div data-role="header">
        <div data-role="navbar">
            <span>Add Product</span> <a data-click="closeModalViewAdd" data-role="button" data-align="right">
                Cancel</a>
        </div>
    </div>
    <ul data-role="listview" data-style="inset">
        <li>
            <label for="username">
                Product Category:</label>
            <input type="text" id="name" /></li>
    </ul>
    <a data-click="addNew" class="addNew" type="button" data-role="button">Add New Product</a>
</div>
<script type="text/x-kendo-tmpl" id="pull-with-endless-template">
<div class="product-item">
    <h3>#:CatName#</h3>

</div>
</script>
<script>
    function mobileListViewPullWithEndless(e) {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "http://mydomain.com/api/homescreenapp/36/8c177908-be9f-4474-b036-43e8cef736b5/345/800/web",
                    dataType: 'JSON'                       
                }
            },
            serverPaging: true,
            pageSize: 2                 
        });

        $("#pull-with-endless-listview").kendoMobileListView({
            dataSource: dataSource,
            template: $("#pull-with-endless-template").text(),
            pullToRefresh: true,
            endlessScroll: true
        });

        $("#addNew").click(function () {
            loader.show();
            addProductDataSource.add({
                ProductName: $("#name").val(),
                UnitPrice: Math.floor((Math.random() * 10) + 1)
            });
        });
    }

    function closeModalViewAdd() {
        $("#modalview-add").kendoMobileModalView("close");
    }

    function addNew() {
        addProductDataSource.add({
            ProductName: $("#name").val(),
            UnitPrice: Math.floor((Math.random() * 10) + 1)
        });

        closeModalViewAdd();
    }

    var addProductDataSource = new kendo.data.DataSource({
        transport: {
            create: {
                url: " http://mydomain.com/api/homescreenapp/36/8c177908-be9f-4474-b036-43e8cef736b5/345/800/web",
                dataType: "jsonp"
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return { models: kendo.stringify(options.models) };
                }
            }
        },
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: { type: "string" }
                }
            }
        },
        autoSync: true,
        batch: true,
        requestEnd: function () {
            $("#name").val("");
        }
    });
</script>
<script>
    window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>

我们正在关注来自webapi的jSon回复

{"Categories":[{"CategoryId":"305","CatName":"Clothing","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345webMan&woman.jpg","MapUrlRewrite":"Clothing"},{"CategoryId":"306","CatName":"Shoes","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web2.jpg","MapUrlRewrite":"Shoes"},{"CategoryId":"307","CatName":"Handbags","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web3.jpg","MapUrlRewrite":"Handbags"},{"CategoryId":"308","CatName":"Accesories","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web4.jpg","MapUrlRewrite":"Accesories"},{"CategoryId":"309","CatName":"Luggage","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web5.jpg","MapUrlRewrite":"Luggage"},{"CategoryId":"310","CatName":"Jewellery","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web6.jpg","MapUrlRewrite":"Jwellery"},{"CategoryId":"344","CatName":"Eye Wear","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web7.jpg","MapUrlRewrite":"Eye-Wear"},{"CategoryId":"345","CatName":"Watches","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web8.jpg","MapUrlRewrite":"Top-Brands"},{"CategoryId":"346","CatName":"Hot Brands","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345webHot_Brands.jpg","MapUrlRewrite":"Hot-Deals--Offers"}],"HomeBannerImages":[{"ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Banners/ResizeImage/800webBanner_1.jpg","BannerTitle":"Banner Clothing","BannerDescription":"","CategoryId":null},{"ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Banners/ResizeImage/800webshoes-banner_2.jpg","BannerTitle":" shoes banner","BannerDescription":"","CategoryId":null},{"ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Banners/ResizeImage/800webhandbag-banner1.jpg","BannerTitle":"handbag ","BannerDescription":"","CategoryId":null},{"ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Banners/ResizeImage/800webLuggage_2.jpg","BannerTitle":"Laggege","BannerDescription":"","CategoryId":null},{"ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Banners/ResizeImage/800webjewelry_2.jpg","BannerTitle":"jewelry","BannerDescription":"","CategoryId":null}],"CustomerLogo":"http://mydomailn.com/iconnect/Images/eapparelCustomerLogo12.png"}

代码和错误：

如果我们绑定kendoMobileListView，上面的代码我们收到错误“Uncaught SyntaxError：Unexpected token”
如果我们使用dataType：“json”而不是dataType：“jsonp”，我会收到类似“Uncaught TypeError：无法调用未定义的方法'切片”的错误
如果我们使用dataType：“json”而不是dataType：“json array”，它不会在列表中显示任何内容，甚至是错误的。这意味着所有事情都将是空白的。
我们已经完成了以下所有参数。但仍然没有取得任何成功。

dataType：'JSONP'， jsonpCallback：'jsonCallback'，类型：'GET'， async：false， crossDomain：true

请指导我这个问题，我只需要在列表中绑定类别名称。仅供参考：我无法更改webapi响应，因为它正在被客户的其他服务使用。

谢谢，阿希什

Answer 1

Kendo希望服务器返回一个JSON数组。在您的情况下，它返回一个具有Categories属性的对象，其中存储了数据数组。您需要告诉Kendo DataSource使用schema.data配置选项从.Categories提取数据。

... = new DataSource({
    ...
    schema: {
        data: "Categories"
    }
});

kendoMobileListView - 使用jSon进行动态数据绑定

1 个答案: