Jquery 剑道UI-使用声明性绑定将数据源绑定到两个剑道小部件

我正在为我的站点使用剑道UI和他们的MVVM系统，我有一个情况，我有一个

ListView

小部件，它与

Pager

小部件一起使用。它们都共享一个

kendo.data.dataSource

。连接它们的代码看起来有点像这样

HTML 现在这一切正常，但在我的网站上还有其他类似的事情。我有点厌倦了重复所有这些javascript，所以我将行为烘焙到可重用的小部件中。这确实解决了一些问题，但我认为我可以走得更远，让事情变得更容易。我想尝试在MVVM系统中以声明的方式做一些这方面的工作。所以我想我会试试。。这是我所能做到的

<div id="listView"
     data-ns="auras"
     data-role="listview"
     data-selectable="single"
     data-template="display-searchable-one"
     data-source="{ url: '/data/auras', ... }"></div>
<div id="pager" data-ns="auras" class="k-pager-wrap"></div>

---

我很难弄清楚如何正确地连接这些数据，如何使数据源正常工作，如何与寻呼机适当地共享这些数据，以及如何将其绑定到搜索字段中。有什么建议吗？我很想尝试将更多的内容转换为简单的声明性绑定，而不是显式javascript。

您可以通过以下方式之一实现：

使用MVVM。将数据源添加到视图模型中，然后对listview和pager使用

data bind=“source:ds”

：

<div id="listview" data-role="listview" data-bind="source: ds"></div>
<div id="pager" data-role="pager" data-bind="source: ds"></div>

---

差别是微妙的。第一种方法依赖于MVVM，MVVM通过

数据绑定

属性进行操作，而第二种方法相当于设置

数据源

配置选项。如果您已经通过

kendo.bind

使用MVVM，您可以使用第一种方法。如果您没有使用MVVM，可以使用第二个。

您看过剑道网站上的一些MVVM示例了吗？几乎所有的小部件都有MVVM示例。嘿，谢谢。我已经仔细看过了。事实上，我非常擅长剑道MVVM系统。让我困惑的是与数据源有关的特定逻辑。

// define the datasource for searching for auras
var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: '/data/auras',
            dataType: "json",
            type: 'GET',
            cache: false
        }
    },
    schema: {
        total: "total",
        data: "data"
    },
    page: 0,
    pageSize: 5,
    take: 5,
    serverPaging: true,
    serverFiltering: true,
    type: "aspnetmvc-ajax"
});

$("#pager[data-ns='auras']").kendoPager({
    dataSource: dataSource
});

var list = $("#listView[data-ns='auras']").kendoListView({
    dataSource: dataSource,
    template: kendo.template($("#display-searchable-one").html()),
    selectable: "single",
    change: e => {
        var data = dataSource.view(),
            selected = $.map(e.sender.select(), item => data[$(item).index()].toJSON())[0];
        this.Push(selected);
    }
}).data("kendoListView");

var update = (text) => {
    list.dataSource.filter({ field: "Name", operator: "eq", value: text });
};

$("[name='search'][data-ns='auras']").on('change', function () {
    update($(this).val());
});

<div id="listView"
     data-ns="auras"
     data-role="listview"
     data-selectable="single"
     data-template="display-searchable-one"
     data-source="{ url: '/data/auras', ... }"></div>
<div id="pager" data-ns="auras" class="k-pager-wrap"></div>

<div id="listview" data-role="listview" data-bind="source: ds"></div>
<div id="pager" data-role="pager" data-bind="source: ds"></div>

<script>
var ds = new kendo.data.DataSource();
</script>
<div id="listview" data-role="listview" data-source="ds"></div>
<div id="pager" data-role="pager" data-source="ds"></div>