登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›MVVM(Knockout.js)的新尝试：多个Page，一个ViewModel ...

MVVM(Knockout.js)的新尝试：多个Page，一个ViewModel

都淑贞 2025-5-29 18:49:11
对于面向数据的Web应用来说，MVVM模式是一项不错的选择，它借助JS框架提供的“绑定”机制是我们无需过多关注UI（HTML）的细节，只需要操作绑定的数据源。MVVM最早被微软应用于WPF/SL的开发，所以针对Web的MVVM框架来说，Knockout.js（以下简称KO）无疑是“根正苗红”。在进行基于KO的Web应用开发时，我们一般会为具体的Web页面定义针对性的ViewModel，但是在很多情况下很多页面具有相同的UI结构和操作行为，考虑到重用和封装，我们是否为它们创建一个共享的ViewModel呢。最近在一个小项目中，我们对这种方式进行了尝试，觉得是可行的，但同时也发现的一些问题。这篇文章通过一个简化的实例来讨论这种开发方式。[源代码从这里下载]
目录
一、MVVM模式      
二、类似的UI结构和操作行为      
三、共享的ViewModel      
四、Controller的定义      
五、View的定义      
六、_Layout.cshtml定义
一、MVVM模式

1.png
MVVM可以看成是MVC模式的一个变体，Controller被ViewModel取代，但两者具有不同的职能，三元素之间的交互也相同。以通过KO实现的MVVM为例，其核心是“绑定”，我个人又将其分为两类，即“数据的绑定”和“行为的绑定”。所谓数据的绑定，就是将ViewModel定义的数据绑定到View中的UI元素（HTML元素）上，双向/单向绑定同时被支持，而我们通常使用的是双向绑定。而行为绑定体现为事件注册，即View中UI元素的事件（比如某个的click事件）与ViewModel定义的方法（function）进行绑定。
如右图所示，用户行为（比如某个用户点击了页面上的某个Button）触发View的某个事件，与之绑定的定义在ViewModel中的EventHandler（ViewModel的某个方法成员）被自动执行。它可以执行Model，并修改自身维护的数据，由于View和ViewModel的数据绑定是双向的，用户在界面上输入的数据可以被ViewModel捕获，而ViewModel对数据的更新可以自动反映在View上。这样的好出显而易见——我们在通过JS定义UI处理逻辑的时候，无需关注View的细节（View上的HTML），只需要对自身的数据进行操作即可。
二、类似的UI结构和操作行为

2.png
通过上面针对MVVM的介绍我们知道ViewModel是三者核心，ViewModel不但定义了绑定在View上的数据，同时也定义了响应View事件的操作。在实际Web应用开发中（尤其是我从事的企业应用开发），往往存在着很多类似的页面。它们不但具有相同的UI结构，对应的操作行为也大同小异，这意味着ViewModel的数据成员和方法成员（实际上KO中用于双向绑定的数据也是方法）也基本上类似，那么出用重用的目的，我们可以考虑为这些相似的页面定义相应的ViewModel。
3.png
企业应用很多情况下是在进行数据的维护，即对数据进行基本的CRUD操作。举个实际的例子，假设一个Web应用都采用左图所示的页面和操作行为进行针对不同数据的维护：用户输入查询条件点击“Search”按钮筛选需要操作的数据，获取的数据以表格的形式显示出来；考虑到数据量可能比较大，分页获取往往是必须的；表格的Titile为可点击的链接，用于根据当前列进行排序。
用户可以点击数据行右侧的链接（Update和Delete）修改或者删除当前记录，也可以点击上边的Add按钮添加一条新的数据。数据添加和修改的数据均通过弹出的对话框（如右图所示）的形式进行编辑。
三、共享的ViewModel

那么现在我们希望定义一个公用的“类型”来作为这种页面的ViewModel，并且将相应的数据和行为操作定义其中。虽然这个页面结构比较简单，但是包含的功能还是挺多的，不仅仅具有基本的CRUD操作，还具有排序和分页的功能，所以为这样的页面定义一个公共的ViewMode还是要定义不少的成员。如下所示的就是这个ViewModel的定义，由于我为每个成员加上了注释，所以每个成员的作用和实现逻辑还是比较清晰的，在这里我就不一一解释了。补充一点的是，演示实例的样式和对话框功能是通过Bootstrap实现的。
  1.    3:     public const int PageSize = 2;{function ViewModel(options) {
复制代码
  1.    3:     public const int PageSize = 2;    var self = this;
复制代码
  1.    3: 
复制代码
  1.    4:     //标题、数据集、弹出对话框和内容（HTML）
复制代码
  1.    5:     self.title          = ko.observable(options.title);
复制代码
  1.    6:     self.recordSet      = ko.observableArray();
复制代码
  1.    7:     self.dialogContent  = ko.observable();
复制代码
  1.   19: }self.dialog         = options.dialogId ? $("#" + options.dialogId) : $("#dialog");
复制代码
  1.    9: 
复制代码
  1. 122:     self.onDataUpdating = function (data) {  //排序
复制代码
  1. 123:         $.ajax(  //orderBy，defaultOrderBy & isAsc: 当前排序字段名，默认排序字段名和方向（升序/降序）
复制代码
  1.   12:     //totalPages， pageNumbers & pageIndex：总页数，页码列表和当前页
复制代码
  1.   13:     self.orderBy        = ko.observable();
复制代码
  1.   14:     self.isAsc          = ko.observable();
复制代码
  1.   15:     self.defaultOrderBy = options.defaultOrderBy;
复制代码
  1.   16: 
复制代码
  1.   17:     //分页
复制代码
  1.   18:     //totalPages， pageNumbers & pageIndex：总页数，页码列表和当前页
复制代码
  1.   19:     self.totalPages     = ko.observable();
复制代码
  1.   20:     self.pageNumbers    = ko.observableArray();
复制代码
  1.   21:     self.pageIndex      = ko.observable();
复制代码
  1.   22: 
复制代码
  1.   23:     //查询条件：标签和输入值
复制代码
  1.   24:     self.searchCriteria = ko.observableArray(options.searchCriteria);
复制代码
  1.   25: 
复制代码
  1.   26:     //作为显示数据的表格的头部：显示文字和对应的字段名（辅助排序）
复制代码
  1.   27:     self.headers = ko.observableArray(options.headers);
复制代码
  1.   71: 
复制代码
  1.   29:     //CRUD均通过Ajax调用实现，这里提供用于获取Ajax请求地址的方法
复制代码
  1.   30:     self.dataQueryUrlAccessor   = options.dataQueryUrlAccessor;
复制代码
  1.   31:     self.dataAddUrlAccessor     = options.dataAddUrlAccessor;
复制代码
  1.   32:     self.dataUpdateAccessor     = options.dataUpdateAccessor;
复制代码
  1.   33:     self.dataDeleteAccessor     = options.dataDeleteAccessor;
复制代码
  1.   34: 
复制代码
  1.   35:     //removeData：删除操作完成后将数据从recordSet中移除
复制代码
  1.   36:     //replaceData：修改操作后更新recordSet中相应记录
复制代码
  1.   37:     self.removeData     = options.removeData;
复制代码
  1.   38:     self.replaceData    = options.replaceData;
复制代码
  1.   39: 
复制代码
  1.   40:     //Search按钮
复制代码
  1.   41:     self.search = function () {
复制代码
  1.   42:         self.orderBy(self.defaultOrderBy);
复制代码
  1.    4:     public string Id { get; set; }self.isAsc(true);
复制代码
  1.   16:     [Required]     self.pageIndex(1);
复制代码
  1.   45:         $.ajax(
复制代码
  1.    7:     public string FirstName { get; set; }      {
复制代码
  1.   48:     }             url: self.dataQueryUrlAccessor(self),
复制代码
  1.    9:     [Required]        type: "GET",
复制代码
  1.   10:     public string LastName { get; set; }          success: function (result) {
复制代码
  1.   51:     public ActionResult Update(Contact contact)        self.recordSet(result.Data);
复制代码
  1.   51:                 self.totalPages(result.TotalPages);
复制代码
  1.   54:         existing.FirstName = contact.FirstName;        Contact existing = contacts.First(c=>c.Id == contact.Id);            self.resetPageNumbders();
复制代码
  1.   54:         existing.FirstName = contact.FirstName;            }
复制代码
  1.   54:         });
复制代码
  1.   55:     };
复制代码
  1.   56: 
复制代码
  1.   57:     //Reset按钮
复制代码
  1.   58:     self.reset = function () {
复制代码
  1.   59:         for (var i = 0; i < self.searchCriteria().length; i++) {
复制代码
  1.   60:             self.searchCriteria()[i].value("");
复制代码
  1.   61:         }
复制代码
  1.   62:     };
复制代码
  1.   63: 
复制代码
  1.   64:     //获取数据之后根据记录数重置页码
复制代码
  1.   65:     self.resetPageNumbders = function () {
复制代码
  1.   66:         self.pageNumbers.removeAll();
复制代码
  1.   67:         for (var i = 1; i <= self.totalPages(); i++) {
复制代码
  1.   68:             self.pageNumbers.push(i);
复制代码
  1.   69:         }
复制代码
  1.   70:     };
复制代码
  1.   71: 
复制代码
  1.   72:     //点击表格头部进行排序
复制代码
  1.   73:     self.sort = function (header) {
复制代码
  1.   74:         if (self.orderBy() == header.value) {
复制代码
  1.   75:             self.isAsc(!self.isAsc());
复制代码
  1.   76:         }
复制代码
  1.   77:         self.orderBy(header.value);
复制代码
  1.   78:         self.pageIndex(1);
复制代码
  1.   79:         $.ajax(
复制代码
  1.   80:         {
复制代码
  1.   81:             url: self.dataQueryUrlAccessor(self),
复制代码
  1.   82:             type: "GET",
复制代码
  1.   83:             success: function (result) {
复制代码
  1.   84:                 self.recordSet(result.Data);
复制代码
  1.   85:             }
复制代码
  1.   86:         });
复制代码
  1.   87:     };
复制代码
  1.   88: 
复制代码
  1.   89:     //点击页码获取当前页数据
复制代码
  1.   90:     self.turnPage = function (pageIndex) {
复制代码
  1.   91:         self.pageIndex(pageIndex);
复制代码
  1.   92:         $.ajax(
复制代码
  1.   93:         {
复制代码
  1.   94:             url: self.dataQueryUrlAccessor(self),
复制代码
  1.   95:             type: "GET",
复制代码
  1.   96:             success: function (result) {
复制代码
  1.   97:                 self.recordSet(result.Data);
复制代码
  1.   98:             }
复制代码
  1.   99:         });
复制代码
  1. 100:     };
复制代码
  1. 101: 
复制代码
  1. 102:     //点击Add按钮弹出“添加数据”对话框
复制代码
  1. 103:     self.onDataAdding = function () {
复制代码
  1. 104:         $.ajax(
复制代码
  1. 105:         {
复制代码
  1. 106:             url: self.dataAddUrlAccessor(self),
复制代码
  1. 107:             type: "GET",
复制代码
  1. 108:             success: function (result) {
复制代码
  1. 109:                 self.dialogContent(result);
复制代码
  1. 110:                 self.dialog.modal("show");
复制代码
针对HTTP-GET请求的Add和Update方法返回的是一个ViewResult，换句话说客户端通过Ajax请求最终得到的结果是相应的HTML。客户端最终将HTML作为对话框的内容显示出来，就是我们看到的“联系人编辑”对话框。两个方法呈现的都是一个名为ContactPartial的分部View，从如下定义可以看出这是一个Model类型为Contact的强类型View，Contact对象以编辑模式呈现在一个以Ajax方式提交的表单中。由于数据添加和数据更新操作针对不同的目标Action，而且提交之后回调的JavaScript函数也不一样，两者以ViewBag的形式（ViewBag.Action和ViewBag.OnSuccess）来动态设置。
  1. 111:             }
复制代码
  1. 112:         });
复制代码
  1. 113:     };
复制代码
  1. 114: 
复制代码
  1. 115:     //点击“添加数据”对话框的Save按钮关闭对话框，并将添加的记录插入recordSet
复制代码
  1. 116:     self.onDataAdded = function (data) {
复制代码
  1. 117:         self.dialog.modal("hide");
复制代码
  1. 118:         self.recordSet.unshift(data);
复制代码
  1. 119:     };
复制代码
  1. 120: 
复制代码
  1. 121:     //点击Update按钮弹出“修改数据”对话框
复制代码
  1. 122:     self.onDataUpdating = function (data) {
复制代码
  1. 123:         $.ajax(
复制代码
  1. 124:         {
复制代码
  1. 125:             url: self.dataUpdateAccessor(data, self),
复制代码
  1. 126:             type: "GET",
复制代码
  1. 127:             success: function (result) {
复制代码
  1. 128:                 self.dialogContent(result);
复制代码
  1. 129:                 self.dialog.modal("show");
复制代码
  1. 130:             }
复制代码
  1. 131:         });
复制代码
  1. 132:     };
复制代码
  1. 133: 
复制代码
  1. 134:     //点击“修改数据”对话框的Save按钮关闭对话框，并修改recordSet中的数据
复制代码
  1. 135:     self.onDataUpdated = function (data) {
复制代码
  1. 136:         self.dialog.modal("hide");
复制代码
  1. 137:         self.replaceData(data, self);
复制代码
  1. 138:     };
复制代码
  1. 139: 
复制代码
  1.   71: 
复制代码
  1. 141:     self.onDataDeleting = function (data) {
复制代码
  1. 142:         $.ajax(
复制代码
  1. 143:         {
复制代码
  1. 144:             url: self.dataDeleteAccessor(data,self),
复制代码
  1. 145:             type: "GET",
复制代码
  1. 146:             success: function (result) {
复制代码
  1. 147:                 self.removeData(result, self);
复制代码
  1. 148:             }
复制代码
  1. 149:         });
复制代码
  1. 150:     };
复制代码
  1. 151: }
复制代码
  1.    3:     public const int PageSize = 2;{public class Contact
复制代码
  1.    3:     public const int PageSize = 2;{
复制代码
  1.    3:     [Required]
复制代码
  1.    4:     public string Id { get; set; }
复制代码
  1.   16:     [Required]
复制代码
  1.    6:     [Required]
复制代码
  1.    7:     public string FirstName { get; set; }
复制代码
  1.    8: 
复制代码
  1.    9:     [Required]
复制代码
  1.   10:     public string LastName { get; set; }
复制代码
  1.   11: 
复制代码
 
五、View的定义

我们最终来看看作为“联系人管理”页面的Index.cshtml的定义，由于大部分内容都可以与ViewModel的成员进行绑定，所以我们可以将它们通通定义在Layout之中，所以Index.cshtml的定义是非常少的。如下面的代码片断所示，HTML部分只包含针对Contact对象4个属性的绑定而已，因为ViewModel不包括具体数据类型相关的属性定义。对于JS部分，我们指定相应的options创建了一个具体的ViewModel对象并调用ko的applyBindings方法应用到当前页中。options指定的内容包括具体的title、searchCriteria、headers、defaultOrderBy和四个用于获取CRUD操作地址的函数。
  1.   12:     [Required]
复制代码
  1.   13:     [DataType(DataType.EmailAddress)]
复制代码
  1.   14:     public string EmailAddress { get; set; }
复制代码
  1.   15: 
复制代码
  1.   16:     [Required]
复制代码
  1.   17:     [DataType(DataType.PhoneNumber)]
复制代码
  1.   18:     public string PhoneNo { get; set; }
复制代码
  1.   19: }
复制代码
  1.    3:     public const int PageSize = 2;{public class HomeController : Controller
复制代码
 
六、_Layout.cshtml定义

所有能够共享的内容都被定义在如下所示的布局文件中，我们简单地分析一下每个部分具体和ViewModel的哪些成员绑定：

  • 作为查询条件的标签和文本框（简单起见，这里只考虑了这一种输入元素类型）与ViewModel的searchCriteria进行绑定，集合元素包含标签（displayText）和对应的值（value）。
  • Search、Reset和Add按钮的Click事件则和ViewModel的search、reset和onDataAdding方法进行绑定。
  • 与表格头部链接绑定的是ViewModel的headers，headers集合的元素包含显示文字（displayText）、对应的排序字段名（value）和宽度（width）。
  • 对于表格头部的每一列，我们还通过KO的visible绑定设置了表示当前排序列和排序方向的图标（<i class="icon-circle-arrow-up" >和<i class="icon-circle-arrow-down" >）。
  • 表示获取数据的表格主体部分与ViewModel的recordSet绑定。
  • 每个记录后的Update和Delete链接的Click事件与ViewModel的onDataUpdating和onDataDeleting方法绑定。
  • 页码列表和ViewModel的pageNumbers绑定，当前页的CSS（.selected）利用ViewModel的pageIndex来设置。
  • 表示弹出对话框的内容和ViewModel的dialogContent绑定。
  1.    3:     public const int PageSize = 2;{
复制代码
  1.    3:     public const int PageSize = 2;
复制代码
  1.    4: 
复制代码
  1.    5:     private static List<Contact> contacts = new List<Contact>
复制代码
  1.    6:     {
复制代码
  1.    7:         new Contact{Id = "001", FirstName = "San", LastName = "Zhang", EmailAddress = "zhangsan@gmail.com", PhoneNo="123"},
复制代码
  1. 119:     };         
复制代码
  1.   19: }            
复制代码
  1.   10:     };
复制代码
  1. 122:     self.onDataUpdating = function (data) {                     
复制代码
  1. 123:         $.ajax(                     
复制代码
  1. 124:         {                                
复制代码
  1.   14:         return View();
复制代码
  1.   15:     }
复制代码
  1. 127:             success: function (result) {   
复制代码
  1.   17:     public ActionResult GetContacts(string firstName, string lastName, string orderBy, int pageIndex=1, bool isAsc = true)
复制代码
  1.   18:     {
复制代码
  1. 130:             }   
复制代码
  1. 131:         });   
复制代码
  1.   21:                         && (string.IsNullOrEmpty(lastName) || contact.LastName.ToLower().Contains(lastName.ToLower()))
复制代码
  1.   22:                      select contact;
复制代码
  1.   23:        int count = result.Count();
复制代码
  1. 135:     self.onDataUpdated = function (data) {
复制代码
  1.   25:        result = result.Sort(orderBy, isAsc).Skip((pageIndex - 1) * PageSize).Take(PageSize);
复制代码
  1.   26:        return Json(new { Data = result.ToArray(), TotalPages = totalPages }, JsonRequestBehavior.AllowGet);
复制代码
  1. 138:     };            
复制代码
  1. 139:                  
复制代码
  1.   29:     public ActionResult Add()
复制代码
  1. 141:     self.onDataDeleting = function (data) {            
复制代码
  1.   31:         ViewBag.Action = "Add";
复制代码
  1. 143:         {
复制代码
  1.   33:         return View("ContactPartial", new Contact { Id = Guid.NewGuid().ToString() });
复制代码
  1.   34:     }
复制代码
  1. 146:             success: function (result) {        @RenderBody()
复制代码
  1. 147:                 self.removeData(result, self);            [td]
复制代码
  1.   37:     public ActionResult Add(Contact contact)
复制代码
  1. 149:         });               Delete
复制代码
  1.   39:         contacts.Add(contact);
复制代码
  1. 151: }    [/tr]
复制代码
  1.   41:     }
复制代码
  1.   43:     public ActionResult Update(string id)
复制代码
  1.   85:             }
复制代码
  1.    4:     public string Id { get; set; }
复制代码
  1.   16:     [Required]         
  2. [list]
复制代码
  1.   46:         ViewBag.OnSuccess = "viewModel.onDataUpdated";
复制代码
  1.    7:     public string FirstName { get; set; }                  
复制代码
  1.   48:     }
复制代码
  1.    9:     [Required]        
  2. [/list]
复制代码
  1.   10:     public string LastName { get; set; }      
复制代码
  1.   51:     public ActionResult Update(Contact contact)
复制代码
  1.   54:         existing.FirstName = contact.FirstName;        Contact existing = contacts.First(c=>c.Id == contact.Id);{
复制代码
  1.   54:         existing.FirstName = contact.FirstName;        Contact existing = contacts.First(c=>c.Id == contact.Id);
复制代码
  1.   54:         existing.FirstName = contact.FirstName;
复制代码
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
都淑贞
2025-5-29 18:49:11

0

粉丝关注

8

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫