0

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: Cannot call method 'slice' of undefined”的错误

  • 如果我们使用 dataType: “json” 而不是 dataType: “json array”，它不会在列表中显示任何内容，甚至会出错。这意味着所有的东西都将是空白的。

  • 我们已经完成了以下所有参数。但仍然没有取得任何成功。

    数据类型：'JSONP'，jsonpCallback：'jsonCallback'，类型：'GET'，异步：false，crossDomain：true

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

谢谢，阿希什

4

1 回答 1

0

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

... = new DataSource({
    ...
    schema: {
        data: "Categories"
    }
});
于 2014-07-10T21:08:52.247 回答