0
我有這個linked demo的代碼，它是從這個代碼here外推的。Kendo Mobile UI MVVM listview filter not working
無論出於何種原因，當我切換到本地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>