Вопрос:

Фильтр просмотра списка MVDM в Kendo Mobile UI не работает

mobile mvvm kendo-ui

117 просмотра

1 ответ

6 Репутация автора

У меня есть этот связанный демонстрационный код, который был экстраполирован из этого кода здесь .

По какой-то причине, когда я переключаюсь на локальный источник данных 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>
Автор: user2602387 Источник Размещён: 22.08.2016 08:42

Ответы (1)


1 плюс

3619 Репутация автора

Пожалуйста , удалить или отключить все настройки , связанные с операциями данных сервера ( serverPaging, serverFiltering, serverSorting), так как вам не нужны сервера операции с локальными данными. Более того, операции с данными сервера и клиента не могут быть смешаны , что имеет место в предоставленном Dojo .

Вот обновленный пример, который работает:

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

Автор: dimodi Размещён: 23.08.2016 09:24
Вопросы из категории :
32x32