Question

我有这个linked demo代码，该代码是根据此代码here推断出来的。

无论出于何种原因，当我切换到本地json数据源时，排序和过滤功能都会中断。

我显然在这里遗漏了一些东西，有人能指出这可能是什么吗？

我会在这里发布我的代码，以防转到链接对任何人都很烦人：

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/mobile-listview/mvvm">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.metro.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.metro.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css" />

    <script src="http://cdn.kendostatic.com/2015.1.318/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
    <link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
    <script src="../content/shared/js/console.js"></script>
</head>
<body>
<div data-model="mobileListViewModel" data-role="view" id="mobile-listview-events" data-title="ListView MVVM"  data-use-native-scrolling="true">
    <form data-bind="events: { submit: add }">
        <ul data-role="listview" data-style="inset" data-type="group">

            <li>
                Items:
                <ul data-role="listview"
                    data-bind="source: source"
                    data-filterable="{field: 'ProductName', operator: 'startswith'}"
                    data-template="mobile-listview-filtering-template"></ul>
            </li>
        </ul>
    </form>
</div>

<script type="text/x-kendo-tmpl" id="mobile-listview-filtering-template">
    <div class="product">
        <h3>#:ProductName#</h3>
        <p>#:kendo.toString(UnitPrice, "c")#</p>
    </div>
</script>

<script>
        var jsdata = {
        "d" : [
        {
        "__metadata": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(1)", "type": "SampleModel.Product"
        }, "ProductID": 1, "ProductName": "Chai", "SupplierID": 1, "CategoryID": 1, "QuantityPerUnit": "10 boxes x 20 bags", "UnitPrice": "18.00", "UnitsInStock": 39, "UnitsOnOrder": 0, "ReorderLevel": 10, "Discontinued": false, "Category": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(1)/Category"
        }
        }, "Order_Details": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(1)/Order_Details"
        }
        }, "Supplier": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(1)/Supplier"
        }
        }
        }, {
        "__metadata": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(2)", "type": "SampleModel.Product"
        }, "ProductID": 2, "ProductName": "Chang", "SupplierID": 1, "CategoryID": 1, "QuantityPerUnit": "24 - 12 oz bottles", "UnitPrice": "19.00", "UnitsInStock": 17, "UnitsOnOrder": 40, "ReorderLevel": 25, "Discontinued": false, "Category": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(2)/Category"
        }
        }, "Order_Details": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(2)/Order_Details"
        }
        }, "Supplier": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(2)/Supplier"
        }
        }
        }, {
        "__metadata": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(3)", "type": "SampleModel.Product"
        }, "ProductID": 3, "ProductName": "Aniseed Syrup", "SupplierID": 1, "CategoryID": 2, "QuantityPerUnit": "12 - 550 ml bottles", "UnitPrice": "10.00", "UnitsInStock": 13, "UnitsOnOrder": 70, "ReorderLevel": 25, "Discontinued": false, "Category": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(3)/Category"
        }
        }, "Order_Details": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(3)/Order_Details"
        }
        }, "Supplier": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(3)/Supplier"
        }
        }
        }]
        };

        var mobileListViewModel = kendo.observable({
            source: new kendo.data.DataSource({
                type: "json",
                transport: {
                  read: function(options) {
                    options.success(jsdata);
                  }
                },
                schema: {
                  data: "d"
                },
                sort: {
                    field: "ProductName",
                    dir: "asc"
                },
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true,
                pageSize: 50
            })
        });

    </script>


    <script>
        var app = new kendo.mobile.Application(document.body, {skin: "nova"});
    </script>
</body>
</html>

Answer 1

请删除或停用所有与服务器数据操作相关的设置（serverPaging，serverFiltering，serverSorting），因为您不需要服务器操作本地数据。此外，server and client data operations cannot be mixed，provided Dojo中就是这种情况。

以下是一个有效的更新示例：

http://dojo.telerik.com/iFuRE/11

Kendo Mobile UI MVVM listview过滤器无法正常工作

1 个答案: