Постановка задачи
Требуется получение данных в формате JSON. Данные должны быть разбиты на страницы, размер страниц можно устанавливать, страницы можно переключать (а иначе зачем всё это). А также требуется возможность поиска (фильтрации).
Давайте для начала подготовим к работе вновь созданный проект. Для этого выполним операции, которые были уже не раз описаны в предыдущих статьях.
Подготовка
Первое: в Package Maganger Console:
Второе: в главном шаблоне приложения _Layout.cshtml добавим ссылки на скрипты, которые добавились в систему вместе с JsSite.
1: @{ 2: ViewBag.Title = «Home Page»; 3: } 4: 5: <h1data-bind=»text: meta.title»></h1> 6: <divid=»clock»data-bind=»text: clock.time»></div> 7: <pdata-bind=»text: meta.description»></p> 8: 9: <p> 10: page size: <spandata-bind=»text: people().length»></span> 11: <br/> 12: total items: <spandata-bind=»text: ds.queryParams.total»></span> 13: <br/> 14: current page index: <spandata-bind=»text: ds.queryParams.index»></span> 15: <br/> 16: groupSize: <spandata-bind=»text: ds.queryParams.groupSize»></span> 17: <br/> 18: </p> 19: <divdata-bind=»blockUI: indicator»> 20: <div> 21: <inputtype=»text»name=»name» 22: data-bind=»value: ds.queryParams.query, valueUpdate:’keyup'»/> 23: </div> 24: 25: <divdata-bind=»pager: pager»></div> 26: 27: <table> 28: <thead> 29: <tr> 30: <th>Имя</th> 31: <th>Возраст</th> 32: <th>Профессия</th> 33: <th>В партии</th> 34: <th>Пол</th> 35: </tr> 36: </thead> 37: <tbody> 38: <!— ko foreach: people —> 39: <tr> 40: <td> 41: <spandata-bind=»text: Name»></span> 42: </td> 43: <td> 44: <spandata-bind=»text: Age»></span> 45: </td> 46: <td> 47: <spandata-bind=»text: Description»></span> 48: </td> 49: <td> 50: <spandata-bind=»date: MemberDate»></span> 51: </td> 52: <td> 53: <spandata-bind=»text: Gender»></span> 54: </td> 55: </tr> 56: <!— /ko —> 57: </tbody> 58: </table> 59: 60: </div> 61: 62: 63: @section scripts 64: { 65: <scriptsrc=»~/Scripts/app/site.vm.homeIndex.js»></script> 66: } 67: 68: 69: @*<pre> 70: <spandata-bind=»text: JSON.stringify(ko.toJS($data),null,2)»></span> 71: </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.
Скачать проект.
Подробнее: http://feedproxy.google.com/~r/blogmusor/~3/wWFNnkUMEIs/111
Источник: