Detailliertes Beispiel für die Kombination von Bootstrap und KnockoutJs, um Paging-Effekt_Javascript-Fähigkeiten zu erlangen

KnockoutJS ist ein in JavaScript implementiertes MVVM-Framework. Sehr cool. Nachdem beispielsweise die Listendatenelemente hinzugefügt oder gelöscht wurden, ist es nicht erforderlich, das gesamte Kontrollfragment zu aktualisieren oder JS selbst zu schreiben, um Knoten hinzuzufügen oder zu löschen. Sie müssen lediglich die Vorlage und Attribute vordefinieren, die ihrer Syntax entsprechen Definition. Einfach ausgedrückt müssen wir uns nur auf den Datenzugriff konzentrieren.

1. Einleitung

Da das System des Unternehmens kürzlich überarbeitet werden muss, plane ich, KnockoutJs zu verwenden, um das Web-Frontend für das neue System zu erstellen. Dabei bin ich auf ein Problem gestoßen: Wie verwende ich KnockoutJs, um die Paging-Funktion abzuschließen? Im vorherigen Artikel haben wir die Verwendung von KnockoutJs zum Implementieren von Paging nicht vorgestellt. Daher werden wir in diesem Artikel die Verwendung von KnockoutJs + Bootstrap zum Implementieren der Paging-Anzeige von Daten ergänzen.

2. Verwenden Sie KnockoutJs, um Paging zu implementieren

Es gibt zwei Möglichkeiten, Paging zu implementieren. Die erste besteht darin, alle Daten zu laden und dann alle Daten in Seiten anzuzeigen. Die zweite besteht darin, jedes Mal nur einen Teil der Daten zu laden und die folgenden für jede Anforderung neu zu laden. Daten.

Bei diesen beiden Methoden wird beim Paging im Allgemeinen die zweite Methode zum Implementieren von Paging verwendet. Bei Einzelseitenprogrammen hat die erste Implementierungsmethode jedoch auch ihre Vorteile ist vollständig Die erste Implementierungsmethode kann verwendet werden, da in diesem Fall die Benutzererfahrung beim anschließenden Laden von Daten sehr reibungslos verläuft. Daher werden diese beiden Implementierungsmethoden hier vorgestellt.

2.1 Implementierung des Ladens von Teildaten jedes Mal

Der Backend-Code hier verwendet den Code aus dem vorherigen Artikel, wobei nur einige zusätzliche Beispieldaten hinzugefügt wurden. Der spezifische Backend-Implementierungscode lautet:

/// <summary>
 /// Web API 服务，为Web前端提供数据服务
 /// </summary>
 public class TaskController : ApiController
 {
  private readonly TaskRepository _taskRepository = TaskRepository.Current;
  public IEnumerable<Task> 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 pageData = new PagedModel()
   {
    PageIndex = pageIndex,
    PagedData = tasks.ToList(),
    TotalCount = totalCount,
    PageCount = (totalCount+ pageSize -1) / pageSize
   };
   //返回数据
   return pageData;
  }
 }
/// <summary>
 /// 任务仓储，封装了所有关于数据库的操作
 /// </summary>
 public class TaskRepository
 {
  #region Static Filed
  private static Lazy<TaskRepository> _taskRepository = new Lazy<TaskRepository>(() => new TaskRepository());
  public static TaskRepository Current
  {
   get { return _taskRepository.Value; }
  }
  #endregion
  #region Fields
  private readonly List<Task> _tasks = new List<Task>()
  {
   new Task
   {
    Id =1,
    Name = "创建一个SPA程序",
    Description = "SPA(single page web application),SPA的优势就是少量带宽，平滑体验",
    Owner = "Learning hard",
    FinishTime = DateTime.Parse(DateTime.Now.AddDays(1).ToString(CultureInfo.InvariantCulture))
   },
   new Task
   {
    Id =2,
    Name = "学习KnockoutJs",
    Description = "KnockoutJs是一个MVVM类库,支持双向绑定",
    Owner = "Tommy Li",
    FinishTime = DateTime.Parse(DateTime.Now.AddDays(2).ToString(CultureInfo.InvariantCulture))
   },
   new Task
   {
    Id =3,
    Name = "学习AngularJS",
    Description = "AngularJs是MVVM框架，集MVVM和MVC与一体。",
    Owner = "李志",
    FinishTime = DateTime.Parse(DateTime.Now.AddDays(3).ToString(CultureInfo.InvariantCulture))
   },
   new Task
   {
    Id =4,
    Name = "学习ASP.NET MVC网站",
    Description = "Glimpse是一款.NET下的性能测试工具，支持asp.net 、asp.net mvc, EF等等，优势在于，不需要修改原项目任何代码，且能输出代码执行各个环节的执行时间",
    Owner = "Tonny Li",
    FinishTime = DateTime.Parse(DateTime.Now.AddDays(4).ToString(CultureInfo.InvariantCulture))
   },
   new Task
   {
    Id =5,
    Name = "测试任务1",
    Description = "测试任务1",
    Owner = "李志",
    FinishTime = DateTime.Parse(DateTime.Now.AddDays(5).ToString(CultureInfo.InvariantCulture))
   },
   new Task
   {
    Id =6,
    Name = "测试任务2",
    Description = "测试任务2",
    Owner = "李志",
    FinishTime = DateTime.Parse(DateTime.Now.AddDays(6).ToString(CultureInfo.InvariantCulture))
   },
   new Task
   {
    Id =7,
    Name = "测试任务3",
    Description = "测试任务3",
    Owner = "李志",
    FinishTime = DateTime.Parse(DateTime.Now.AddDays(7).ToString(CultureInfo.InvariantCulture))
   },
  };
  #endregion
  #region Public Methods
  public IEnumerable<Task> GetAll()
  {
   return _tasks;
  }
  public IEnumerable<Task> GetAll(int pageNumber, int pageSize, out int totalCount)
  {
   var skip = (pageNumber - 1) * pageSize;
   var take = pageSize;
   totalCount = _tasks.Count;
   return _tasks.Skip(skip).Take(take);
  }
  public Task Get(int id)
  {
   return _tasks.Find(p => p.Id == id);
  }
  public Task Add(Task item)
  {
   if (item == null)
   {
    throw new ArgumentNullException("item");
   }
   item.Id = _tasks.Count + 1;
   _tasks.Add(item);
   return item;
  }
  public void Remove(int id)
  {
   _tasks.RemoveAll(p => p.Id == id);
  }
  public bool Update(Task item)
  {
   if (item == null)
   {
    throw new ArgumentNullException("item");
   }
   var taskItem = Get(item.Id);
   if (taskItem == null)
   {
    return false;
   }
   _tasks.Remove(taskItem);
   _tasks.Add(item);
   return true;
  }
  #endregion
 }

Web-Frontend-Implementierungscode:

@{
ViewBag.Title = "Index2";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="list2">
<h2>分页第二种实现方式——任务列表</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>描述</th>
<th>负责人</th>
<th>创建时间</th>
<th>完成时间</th>
<th>状态</th>
</tr>
</thead>
<tbody data-bind="foreach:pagedList">
<tr>
<td data-bind="text: id"></td>
<td><a data-bind="text: name"></a></td>
<td data-bind="text: 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" class="text-center">
<img width="60" src="/images/loading.gif" />
</td>
</tr>
</tbody>
<tfoot data-bind="ifnot:loadingState">
<tr>
<td colspan="8">
<div class="pull-right">
<div>总共有<span data-bind="text: totalCount"></span>条记录， 每页显示：<span data-bind="text: pageSize"></span>条</div>
<div>
<ul class="pagination">
<li data-bind="css: { disabled: pageIndex() === 1 }"><a href="#" data-bind="click: previous">&laquo;</a></li>
</ul>
<ul data-bind="foreach: allPages" class="pagination">
<li data-bind="css: { active: $data.pageNumber === ($root.pageIndex()) }"><a href="#" data-bind="text: $data.pageNumber, click: function() { $root.gotoPage($data.pageNumber); }"></a></li>
</ul>
<ul class="pagination"><li data-bind="css: { disabled: pageIndex() === pageCount }"><a href="#" data-bind="click: next">&raquo;</a></li></ul>
</div>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div> 

Die entsprechende Js-Implementierung ist:

// 实现分页的第二种方式
var ListViewModel2 = function() {
//viewModel本身。用来防止直接使用this的时候作用域混乱
var self = this;
self.loadingState = ko.observable(true);
self.pageSize = ko.observable(3);
//数据
this.pagedList = ko.observableArray();
//要访问的页码
this.pageIndex = ko.observable(1);
//总页数
this.pageCount = ko.observable(1);
//页码数
this.allPages = 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());
}
//post异步加载数据
sendAjaxRequest("GET", function (data) {
// 加载新的数据前，先移除原先的数据
self.pagedList.removeAll();
self.allPages.removeAll();
self.totalCount(data.totalCount);
self.pageCount(data.pageCount);
self.loadingState(false);
for (var i = 1; i <= data.pageCount; i++) {
//装填页码
self.allPages.push({ pageNumber: i });
}
//for...in 语句用于对数组或者对象的属性进行循环操作。
//for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。
for (var i in data.pagedData) {
//装填数据
self.pagedList.push(data.pagedData[i]);
}
}, 'GetByPaged', { 'pageIndex': self.pageIndex() });
};
//请求第一页数据
this.first = function() {
self.pageIndex(1);
self.refresh();
};
//请求下一页数据
this.next = function() {
self.pageIndex(this.pageIndex() + 1);
self.refresh();
};
//请求先前一页数据
this.previous = function() {
self.pageIndex(this.pageIndex() - 1);
self.refresh();
};
//请求最后一页数据
this.last = function() {
self.pageIndex(this.pageCount() - 1);
self.refresh();
};
//跳转到某页
this.gotoPage = function (data, event) {
self.pageIndex(data);
self.refresh();
};
};
function sendAjaxRequest(httpMethod, callback, url, reqData) {
$.ajax("/api/task" + (url &#63; "/" + url : ""), {
type: httpMethod,
success: callback,
data: reqData
});
}
$(document).ready(function () {
var viewModel = new ListViewModel2();
viewModel.refresh();
if ($('#list2').length)
ko.applyBindings(viewModel, $('#list2').get(0));
}); 

Hier ist eine Einführung in die Implementierungsidee der Verwendung von KnockoutJs zur Implementierung der Paging-Funktion:

1. Nachdem die Seite geladen wurde, initiieren Sie eine Ajax-Anfrage, um den REST-Dienst asynchron aufzurufen und einige Daten anzufordern.

2. Zeigen Sie dann die angeforderten Daten über die KnockoutJs-Bindung an.

3. Binden Sie die entsprechenden Paging-Informationen an Bootstrap-Paging

4. Wenn der Benutzer klickt, um die Seite umzublättern, initiieren Sie eine Ajax-Anfrage, um den Rest-Dienst asynchron aufzurufen, um Daten anzufordern, und zeigen Sie dann die angeforderten Daten an.

Das Obige ist die Aufruflogikbeziehung des oben beschriebenen Codes. Sie können sich auf den entsprechenden JS-Code beziehen, um die obige Beschreibung zu verstehen. An diesem Punkt ist unsere zweite Implementierungsmethode abgeschlossen.

2.2 Laden Sie alle Daten zum ersten Mal und zeigen Sie dann alle Daten auf Seiten an

Als nächstes stellen wir die erste Implementierungsmethode vor. Bei dieser Implementierungsmethode hat der Benutzer nur das Gefühl, dass die Daten zum ersten Mal geladen werden, und nicht, dass die Seite geladen wird , für einige Wenn die Daten selbst nicht zu groß sind, ist die Benutzererfahrung reibungsloser.

Die konkrete Implementierungsidee besteht darin, nicht alle angeforderten Daten auf der Seite anzuzeigen, da zu viele Daten vorhanden sind und der Benutzer möglicherweise geblendet wird, wenn sie alle auf einmal auf der Seite angezeigt werden. Durch die Anzeige der Daten auf Seiten wird es für Benutzer klarer.

Der spezifische Implementierungscode von Web-Front-End-Js lautet:

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.ceil(self.list().length / self.pageSize()) - 1;
});
self.previousPage = function () {
if (self.pageIndex() > 0) {
self.pageIndex(self.pageIndex() - 1);
}
};
self.nextPage = function () {
if (self.pageIndex() < self.maxPageIndex()) {
self.pageIndex(self.pageIndex() + 1);
}
};
self.allPages = ko.dependentObservable(function () {
var pages = [];
for (var i = 0; i <= self.maxPageIndex() ; i++) {
pages.push({ pageNumber: (i + 1) });
}
return pages;
});
self.moveToPage = function (index) {
self.pageIndex(index);
};
};
var listViewModel = new ListViewModel();
function bindViewModel() {
sendAjaxRequest("GET", function (data) {
listViewModel.loadingState(false);
listViewModel.list(data);
listViewModel.totalCount(data.length);
if ($('#list').length)
ko.applyBindings(listViewModel, $('#list').get(0));
}, null, null);
}
$(document).ready(function () {
bindViewModel();
}); 

Die Implementierung der Frontend-Seite ähnelt der vorherigen Implementierung. Der spezifische Seitencode lautet wie folgt:

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="list">
<h2>任务列表</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>描述</th>
<th>负责人</th>
<th>创建时间</th>
<th>完成时间</th>
<th>状态</th>
</tr>
</thead>
<tbody data-bind="foreach:pagedList">
<tr>
<td data-bind="text: id"></td>
<td><a data-bind="text: name"></a></td>
<td data-bind="text: 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" class="text-center">
<img width="60" src="/images/loading.gif" />
</td>
</tr>
</tbody>
<tfoot data-bind="ifnot:loadingState">
<tr>
<td colspan="8">
<div class="pull-right">
<div>总共有<span data-bind="text: totalCount"></span>条记录， 每页显示：<span data-bind="text: pageSize"></span>条</div>
<div>
<ul class="pagination">
<li data-bind="css: { disabled: pageIndex() === 0 }"><a href="#" data-bind="click: previousPage">&laquo;</a></li>
</ul>
<ul data-bind="foreach: allPages" class="pagination">
<li data-bind="css: { active: $data.pageNumber === ($root.pageIndex() + 1) }"><a href="#" data-bind="text: $data.pageNumber, click: function() { $root.moveToPage($data.pageNumber-1); }"></a></li>
</ul>
<ul class="pagination"><li data-bind="css: { disabled: pageIndex() === maxPageIndex() }"><a href="#" data-bind="click: nextPage">&raquo;</a></li></ul>
</div>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div> 

3. Betriebseffekt

Als nächstes werfen wir einen Blick auf den Paging-Effekt, der mit KnockoutJs erzielt wird:

4. Zusammenfassung

An dieser Stelle endet der in diesem Artikel vorgestellte Inhalt. Obwohl der in diesem Artikel implementierte Inhalt relativ einfach ist, glaube ich, dass die Implementierung dieses Artikels für einige Freunde, die neu bei KnockoutJs sind, eine große Hilfe sein wird . Als nächstes werde ich den relevanten Inhalt von AngularJs mit Ihnen teilen.

Das Obige ist die detaillierte Erklärung des vom Herausgeber eingeführten Beispiels für die Kombination von Bootstrap und KnockoutJs, um den Paging-Effekt zu erzielen.