HTML

Question

我正在为我的网站使用Kendo UI及其MVVM系统，我的情况是ListView小部件附带了Pager小部件。他们两人共享一个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;"/>

Kendo模板

<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

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

使用MVVM。将数据源添加到视图模型中，然后将data-bind="source: ds"用于listview和pager：

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

使用全局数据源并使用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，可以使用第二个。

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

HTML

Kendo模板

的Javascript

1 个答案: