Я использую 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.