Kendo UI - 使用声明性绑定将 DataSource 绑定到两个 kendo 小部件

Question

我正在为我的站点使用 Kendo UI 和他们的 MVVM 系统，并且我有一个伴随 Pager 小部件的 ListView 小部件。他们俩共享一个kendo.data.dataSource。将它们连接起来的代码看起来像这样；

HTML

<div class="form-group">
    <input type="text" class="form-control input-lg" name="search" data-ns="auras" placeholder="Search" />
</div>
<div class="form-area">
    <div id="listView" data-ns="auras"></div>
    <div id="pager" data-ns="auras" class="k-pager-wrap"></div>
</div>
<div class="form-group">
    <div data-template="display-searchable-selected" data-bind="source: Auras"></div>
</div>
<br style="clear: both;"/>

剑道模板

<script type="text/x-kendo-template" id="display-searchable-one">
    <div class="col-md-2">
        <div class="alert-message alert-message-default">
            <h2>
                ${ data.Name }
            </h2>
            <p>
                ${ data.Description }
            </p>
        </div>
    </div>
</script>
<script type="text/x-kendo-template" id="display-searchable-selected">
    <div class="col-md-2">
        <div class="alert-message alert-message-success">
            <span class="alert-close" data-bind="click: onRemove">
                <span class="glyphicon glyphicon-remove"></span>
            </span>
            <h2>
                ${ data.Name }
            </h2>
        </div>
    </div>
</script>

Javascript

// 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());
});

现在这可以正常工作，但我的网站上还有其他类似的东西。我有点厌倦了重复所有这些 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 中。

Answer 1

您可以通过以下方式之一进行：

1. 使用 MVVM。将数据源添加到您的视图模型，然后将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>
   

2. 使用全局数据源并使用data-source 属性。

   <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>
   

区别很微妙。第一种方法依赖于通过data-bind 属性运行的MVVM，而第二种方法等效于设置dataSource 配置选项。如果您已经通过kendo.bind 使用 MVVM，您可以使用第一种方法。如果你没有使用 MVVM，你可以使用第二个。