Knockoutjs-это JavaScript-разработанный фреймворк MVVM. Очень хороший. Например, после добавления или уменьшения элементов данных списка нет необходимости обновлять весь управляющий фрагмент или записать JS с добавлением и узлами удаления самостоятельно. Просто определите шаблон и атрибуты, которые соответствуют его определениям синтаксиса. Проще говоря, нам нужно только обратить внимание на доступ к данным.
1. Введение
Поскольку система компании должна быть обновлена недавно, я планирую использовать nockoutjs для создания веб-фронта для обновленной новой системы. Во время процесса я столкнулся с проблемой - как использовать nockoutjs для выполнения функции страниц. В предыдущей статье KnockoutJS не введен в реализацию страниц, поэтому в этой статье nockoutjs + bootstrap будет использоваться для реализации отображения данных лиц.
2. Используйте nockoutjs для реализации страниц.
Есть два способа внедрения пейджинг. Первый - загрузить все данные, а затем отобразить все данные на страницах; Второе - каждый раз загружать только часть данных и каждый раз перезагрузить последующие данные.
Для этих двух методов странификация, реализованная с использованием метода бритвы, обычно использует второй метод для реализации страниц, но для одностраничных программ первая реализация также имеет свои преимущества. Для не очень больших объемов данных можно использовать первый метод реализации, потому что таким образом последующая загрузка данных будет очень плавной. Итак, здесь мы представим эти два метода реализации отдельно.
2.1 Реализация частичной загрузки данных каждый раз
Бэкэнд -код здесь использует код из предыдущей статьи, но добавляет некоторые примеры данных. Конкретный код реализации бэкэнд:
/// <summary> /// Сервис Web API, предоставляя услуги данных для веб-фронта /// </summary> Public Class TaskController: apicontroller {private readonly taskRepository _taskRepository = taskRepository.current; public ienumerable <sase> getall () {return _taskRepository.getall (). orderby (a => a.id); } [Route ("api/task/getBypaged")] public pageDmodel getall ([fromuri] int pageindex) {const int pageSize = 3; int totalCount; var tasks = _taskRepository.getall (pageIndex, pageSize, out totalCount) .orderby (a => a.id); var pagegatata = new pagegmodel () {pageIndex = pageIndex, pagegedData = tasks.tolist (), totalCount = totalCount, pageCount = (totalCount+ pagesize -1) / pagesize}; // возвращать данные возврата Pagegata; }} /// <summary> /// Репозиторий задачи, инкапсулирование всех операций о базе данных //// </summary> public class taskrepository {#region static, поданный частный статический ленивый <taskrepository> _taskRepository = new Lazy <saskrePository> (() => new TaskRepository ()); public Static TaskRepository Current {get {return _taskRepository.value; }}. Datetime.parse (datetime.now.adddays (1) .toString (cultureInfo.invariantculture))}, новая задача {id = 2, name = "Learning nockoutjs", description = "nockoutjs-это библиотека класса MVVM, которая поддерживает двухстороннее привязку", владелец = "tommy li, finelmime = funithimtime = DateTime.parse (datetime.now.adddays (2) .toString (cultureInfo.invariantculture))}, новая задача {id = 3, name = "Learn AngularJs", описание = "AngularJs - это структура MVVM, которая интегрирует MVVM и MVC с одним. Datetime.parse (datetime.now.adddays (3) .toString (cultureInfo.invariantculture))}, новая задача {id = 4, name = "Learn Asp.net Mvc Веб -сайт", Description = "Mivsse - это инструмент тестирования производительности под .NET, который поддерживает ASP.NET, asp.net MVC, EF, и Effect, и это не то, что это не так, что это не так, что это не так. может вывести время выполнения каждой ссылки на выполнение кода ", владелец =" tonny li ", finishtime = dateTime.parse (dateTime.now.adddays (4) .toString (cultureInfo.invariantculture)}, новая задача {id = 5, name =" test task 1 ", descriantculture))}, новая задача {id = 5, name =" test 1 ", descriantcultculture))}. Datetime.parse (datetime.now.adddays (5) .toString (cultureInfo.invariantculture))}, новая задача {id = 6, name = "test task 2", description = "Test Task 2", владелец = "li Zhi", FinelingTime = DateTime.parse (datetime.now.adddays (6) .toString (cultureInfo.invariantculture))}, новая задача {id = 7, name = "test task 3", description = "Test Task 3", владелец = "li Zhi", FinelingTime = Datetime.parse (datetime.now.adddays (7) .toString (cultureInfo.invariantculture)},}; #endregion #region public Methods public ienumerable <sase> getall () {return _tasks; } public Ienumerable <sase> getAll (int pageNumber, int pageSize, out int otatcount) {var skip = (pageNumber - 1) * pageSize; var take = pagesize; totalCount = _tasks.count; вернуть _tasks.skip (skip) .take (take); } публичная задача get (int id) {return _tasks.find (p => p.id == id); } публичная задача добавить (элемент задачи) {if (item == null) {бросить новый аргумент. } item.id = _tasks.count + 1; _tasks.add (item); вернуть элемент; } public void remove (int id) {_tasks.removeall (p => p.id == id); } public bool update (элемент задачи) {if (item == null) {бросить новый аргумент. } var taskitem = get (item.id); if (taskitem == null) {return false; } _tasks.remove (taskitem); _tasks.add (item); вернуть истину; } #endregion}Код реализации веб-фронта:
@{ViewBag.Title = "Index2";Layout = "~/Views/Shared/_Layout.cshtml";}<div id="list2"><h2>The second implementation method of pagination-task list</h2><div><table><thead><tr><th>number</th><th>name</th><th>description</th><th>person in Заряд </th> <Th> время создания </th> <Th> Полное время </th> <Th> Состояние </th> </tr> </treat> <tbody Data-bind = "foreach: PagegedList"> <Tr> <TD DATA-BIND = "Текст: ID"> </TD> <TD> <A DATA-BIND = "TEXT: имя"> </A> </TD> <TD> <T.-Text: "Text:" Text: "Tex-bind =" TD> <T. description"></td><td data-bind="text: owner"></td><td data-bind="text: creationTime"></td><td data-bind="text: finishTime"></td><td data-bind="text: state"></td></tr></tbody><tbody data-bind="if: loadingState"><tr><td colspan = "8"> <img src = "/images/load.gif"/> </td> </tr> </tbody> <tfoot data-bind = "ifnot: loadingstate"> <tr> <td colspan = "8"> <div> <Div> with with span data-bind = ". data-bind = "text: pagesize"> </span> записи </div> <viv> <ul> <li data-bind = "css: {disabled: pageIndex () === 1}"> <a href = "#" data-bind = "click: allpage"> «</a> </li> </ul> <ul-bind =" for allpages "> </a> </li> </ul> <ul-bind =" $ data.pagenumber === ($ root.pageindex ())} "> <a href ="#"data-bind =" text: $ data.pageNumber, click: function () {$ root.gotopage ($ data.pagenumber); PageCount} "> <a href ="#"data-bind =" click: next ">» </a> </li> </ul> </div> </div> </td> </tfoot> </table> </div> </div> </td> </tfoot> </table> </div> </div>Соответствующая реализация JS:
// Второй способ реализации Paging var listViewModel2 = function () {// сама ViewModel. Используется для предотвращения путаницы с применением при использовании этого напрямую var self = this; Self.LoadingState = ko.ObServable (true); self.pagesize = ko.observable (3); // data this.pagedlist = ko.observablearray (); // номер страницы, который должен быть доступен this.pageindex = ko.observable (1); // Общее число страниц this.pagecount = ko.observable (1); ko.observablearray (); // текущая страница this.currengepage = ko.observable (1); self.totalcount = ko.observable (1); this.refresh = function () {// ограничить номер страницы запроса в номере страницы данных if (self.pageindex () <1) self.pageindex (1); if (self.pageindex ()> self.pagecount () {self.pageindex (self.pagecount ()/pogecount () {self.pageindex (self.pagecount ();); SendAjaxRequest ("Get", function (data) {// Перед загрузкой новых данных удалите исходные данные self.pagedList.removeall (); self.allpages.removeall (); self.totalcount (data.totalcount); self.pagecount (data.pagent); i ++) {// reload number self.allpages.push ({pageNumber: i});} // Для ... в утверждении используется свойства массива или объекта. self.pagedlist.push (data.pageddata [i]);}}, 'getBypaged', {'pageIndex': self.pageIndex ()});}; // запросить первую страницу данных this.first = function () {self.pageindex (1); self.refresh ();}; // запросить следующую страницу data) {self.pageIndex (this.pageIndex () + 1); self.refresh ();}; // Запросить предыдущую страницу данных this.previous = function () {self.pageindex (this.pageindex () - 1); self.refresh ();}; // Запросить последнюю страницу data.last = function () {selfexectex (); 1); self.refresh ();}; // перенаправить на определенную страницу this.gotopage = function (data, event) {self.pageindex (data); self.refresh ();};};}; Функция sendajaxRequest (httpmethod, обратный вызов, url, reqdata) {$ .ajax ("/api/task" + (url? ListViewModel2 (); viewModel.refresh (); if ($ ('#list2'). Length) ko.applybindings (viewmodel, $ ('#list2'). Get (0));});Вот введение в идею реализации использования nockoutjs для реализации функции лиц:
1. После загрузки страницы инициируйте запрос AJAX, чтобы позвонить в службу REST асинхронно, чтобы запросить часть данных.
2. Затем отобразите запрошенные данные через привязку nockoutjs.
3. Свяжите соответствующую информацию о пейджинге с обработкой начальной загрузки
4. Когда пользователь нажимает, чтобы перевернуть страницу, инициируйте запрос AJAX, чтобы позвонить в службу REST Asynchrony и отобразить запрошенные данные.
Это логическая связь вызывающего кода, описанного выше. Вы можете обратиться к соответствующему коду JS, чтобы понять приведенное выше описание. На этом этапе наш второй метод реализации завершен.
2.2 Загрузите все данные в первый раз, а затем отобразите все подключение данных
Далее мы представим первый метод реализации. В этом методе реализации пользователи будут чувствовать, что данные загружаются в первый раз, и они не будут чувствовать, что страница загружается в процессе поворота страницы. Это заставит пользователей чувствовать себя более плавным, когда в некоторых случаях не так много данных.
Конкретная идея реализации состоит в том, чтобы не отображать все запрошенные данные на странице, потому что данных слишком много, и она будет отображаться на странице одновременно, и пользователи могут быть ослеплены. Отображение подключения данных заставит пользователей более ясно.
Конкретный код реализации веб-фронтального JS:
var ListViewModel = function () {var self = this; window.viewModel = self; self.list = ko.observableArray (); self.pagesize = ko.observable (3); self.pageindex = ko.observable (0); // номер страницы, который будет доступен Self.TotalCount = ko.observable (1); // общее количество записей self.loadingstate = ko.observable (true); self.pagedList = ko. -dependentoBservable (function () {var size = self.pagesize (); var start = self.pageindex () * size; return self.list.slice (start, start + size);}); self.maxPageindex = ko.dependentObservable (function () {return math.se.se (self.list () langle () - langth (). 1;}); self.previouspage = function () {if (self.pageIndex ()> 0) {self.pageIndex (self.pageIndex () - 1);}}; self.nextPage = function () {if (self.PageIndex () <) <self.maxPageIndex ()) {) {if (self.pageIndex () <) <) <) <) <) <) <) <) <) <) <) <) <) <) <) <) <) <) <). 1);}}; self.allpages = ko. -decependentObservable (function () {var pages = []; for (var i = 0; i <= self.maxpageIndex (); i ++) {pages.push ({pagenumber: (i+1)});} return page;}); {self.pageIndex (index);};}; var listViewModel = new ListViewModel (); function bindViewModel () {sendAjaxRequest ("get", function (data) {listViewModel.loadingState (false); if -lizefytond.list (data); ($ ('#list'). Length) ko.applybindings (listViewModel, $ ('#list'). get (0));}, null, null);} $ (document) .ready (function () {bindViewModel ();});Реализация его фронтальной страницы аналогична предыдущей реализации. Конкретный код страницы заключается в следующем:
@{Viewbag.title = "index";; layout = "~/vision/shared/_layout.cshtml";} <div id = "list"> <h2> список задач </h2> <div> <tabe> <thead> <tr> <hh> </th> <th> </th> </th> </th> </th>. Время </th> <Th> Время завершения </th> <Th> statU </th> </tr> </tbode Data-bind = "foreach: PagedList"> <Tr> <TD DATA-BIND = "Текст: ID"> </TD> <TD> <A DATA-BIND = "Текст: имя"> </a> </td> <td DATA-bIND = " DATA-BIND = "Текст: владелец"> </td> <td data-bind = "text: creationtime"> </td> <td data-bind = "text: finishingtime"> </td> <td data-bind = "text: atation"> </td> </tr> </tbode> <tbody Data-bind = "if: watringState"> <Tr> <T-im-col-img> <Td> <T. src = "/images/load.gif"/> </td> </tr> </tbody> <tfoot data-bind = "ifnot: loadstate"> <tr> <td colspan = "8"> <div> <div> Есть общая сумма <pran data-bind = "text: totalcount"> </span> records, и каждая страница отображается: <span = "text: totalCount"> </span>, и каждая страница отображается: <pran data = "text-bind =" textcount "> </span> и каждая страница: <span = bind =" textcount "> </span> и каждая страница: <span = bind =" span = "span =": pageize "> </span> записи </div> <div> <ul> <li data-bind =" css: {disabled: pageindex () === 0} "> <a href ="#"data-bind =" click: allpage ">« </a> </li> </ul> <ul data-bind = "for allpage" $ data.pagenumber === ($ root.pageindex () + 1)} »> <a href ="#"data-bind =" text: $ data.pageNumber, click: function () {$ root.movetopage ($ data.pagenumber-1); === maxPageIndex ()} "> <a href ="#"data-bind =" click: nextpage ">» </a> </li> </ul> </div> </div> </td> </tr> </tfoot> </table> </tiv> </div> </tr> </tfoot> </table> </tiv> </div>3. Эффект работы
Далее давайте посмотрим на эффект странификации, реализованный с использованием nockoutjs:
4. Резюме
На этом этапе контент, который будет представлен в этой статье, закончен. Хотя контент, реализованный в этой статье, относительно прост, для некоторых друзей, которые являются новичками в нокаутировании, я считаю, что реализация этой статьи станет большим руководством. Далее я поделюсь с вами соответствующим содержанием AngularJS.
Выше приведено подробное объяснение примеров комбинирования начальной загрузки с нокаутированием для достижения эффектов страниц, которые редактор представил вам. Я надеюсь, что это будет полезно для вас!