HTML 5: PagedList на knockout.js или как разбить данные на страницы через AJAX

Knockout.js очень мощный инструмент для разработки приложений под HTML 5. На этот раз будем делать пейджер. Как оказалось, задача не совсем тривиальная. Смотрите сами.

Постановка задачи

Требуется получение данных в формате JSON. Данные должны быть разбиты на страницы, размер страниц можно устанавливать, страницы можно переключать (а иначе зачем всё это). А также требуется возможность поиска (фильтрации).

Давайте для начала подготовим к работе вновь созданный проект. Для этого выполним операции, которые были уже не раз описаны в предыдущих статьях.

Подготовка

Первое: в Package Maganger Console:

1. Обновим все Nuget-пакеты, которые встроены в шаблон MVC4.
2. Установим новый пакет JsSite – библиотека Java-скриптов.
3. Еще один пакет SampleData, содержит тестовые данные (чтобы было с чем работать, описание пакета и его создание уже было описано ранее)

Второе: в главном шаблоне приложения _Layout.cshtml добавим ссылки на скрипты, которые добавились в систему вместе с JsSite.

@{
    ViewBag.Title = "Home Page";
}

<h1 data-bind="text: meta.title"></h1>
<div id="clock" data-bind="text: clock.time"></div>
<p data-bind="text: meta.description"></p>

<p>
    page size: <span data-bind="text: people().length"></span>
    <br />
    total items: <span data-bind="text: ds.queryParams.total"></span>
    <br />
    current page index: <span data-bind="text: ds.queryParams.index"></span>
    <br />
    groupSize: <span data-bind="text: ds.queryParams.groupSize"></span>
    <br />
</p>
<div data-bind="blockUI: indicator">
    <div>
        <input type="text" name="name"
            data-bind="value: ds.queryParams.query, valueUpdate:'keyup'" />
    </div>

    <div data-bind="pager: pager"></div>

    <table>
        <thead>
            <tr>
                <th>Имя</th>
                <th>Возраст</th>
                <th>Профессия</th>
                <th>В партии</th>
                <th>Пол</th>
            </tr>
        </thead>
        <tbody>
            <!-- ko foreach: people -->
            <tr>
                <td>
                    <span data-bind="text: Name"></span>
                </td>
                <td>
                    <span data-bind="text: Age"></span>
                </td>
                <td>
                    <span data-bind="text: Description"></span>
                </td>
                <td>
                    <span data-bind="date: MemberDate"></span>
                </td>
                <td>
                    <span data-bind="text: Gender"></span>
                </td>
            </tr>
            <!-- /ko -->
        </tbody>
    </table>

</div>


@section scripts
{
    <script src="~/Scripts/app/site.vm.homeIndex.js"></script>
}


@*<pre>
<span data-bind="text: JSON.stringify(ko.toJS($data),null,2)"></span>
</pre>*@

В качестве заключения

В предыдущем листинге, в строке 25 вы уже заметили, binding типа Pager, именно так осуществляется привязка site.controls.Pager() на форме (в разметке). Данная реализация пейджера очень проста, потому что малова-то кнопок навигации, но это уже дело техники.

Вся магия привязки лежит в Knockout, а конкретно в файле site.bindingHandlers.js,который устанавливается с пакетом JsSite,  я написал ko.bindingHandlers.pager, который и выводит страницы от site.controls.Pager.

Кстати, вместе с пакетом JsSite появляется файл content/site.pager.css со стилями для пейджера и картинка-анимация images/ms-loader.gif.