json - kendoMobileListView - jSon による動的データバインディング

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: “jsonp” の代わりに dataType: “json” を使用すると、「Uncaught TypeError: Cannot call method 'slice' of undefined」のようなエラーが発生します。
dataType: “json array” の代わりに dataType: “json” を使用すると、リストに何も表示されず、エラーになります。それはすべてが空白になることを意味します。
以下のすべてのパラメーターを使用しました。しかし、まだ成功していません。

dataType: 'JSONP', jsonpCallback: 'jsonCallback', type: 'GET', async: false, crossDomain: true

この問題について教えてください。リスト内のカテゴリ名のみをバインドする必要があります。参考：クライアントの他のサービスで使用されているため、webapi 応答を変更できません。

ありがとう、アシッシュ

json - kendoMobileListView - jSon による動的データバインディング

1 に答える 1

Related

Reference