在最近做的一个项目中,页面数据全部通过js ajax调用webapi接口获取,也就是说页面的数据全部使用javascript脚本填充,这就想到了使用一个MVVM模式的js框架来做这件事,在该项目中选择了Knockout.js。下面简单介绍一下Knockout的基本用法,作为备忘。
1 Knockout简介
Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化。
Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护。
Knockout有如下4大重要概念:
1、声明式绑定 (Declarative Bindings):使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。
2、UI界面自动刷新 (Automatic UI Refresh):当您的模型状态(model state)改变时,您的UI界面将自动更新。
3、依赖跟踪 (Dependency Tracking):为转变和联合数据,在你的模型数据之间隐式建立关系。
4、模板 (Templating):为您的模型数据快速编写复杂的可嵌套的UI。
简称:KO
2 入门介绍
1、 创建不带有监控属性的ViewModel
创建一个view model,只需要声明任意的JavaScript object。例如:
var myViewModel = { personName: ‘Bob‘, personAge: 123 };
把该ViewModel绑定到HTMl代码中,例如:下面的代码显示personName 值
The name is <span data-bind="text: personName"></span>
激活Knockout,需要添加如下的 <script> 代码块:
ko.applyBindings(myViewModel);
2、创建带有监控属性的view model
监控属性Observables
现在已经知道如何创建一个简单的view model并且通过binding显示它的属性了。但是KO一个重要的功能是当你的view model改变的时候能自动更新你的界面。当你的view model部分改变的时候KO是如何知道的呢?答案是:你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript objects,能够通知订阅者它的改变以及自动探测到相关的依赖。
例如:将上述例子的view model改成如下代码:
var myViewModel = { personName: ko.observable(‘Bob‘), personAge: ko.observable(123) };
你根本不需要修改view – 所有的data-bind语法依然工作,不同的是他能监控到变化,当值改变时,view会自动更新。
3 使用Knockout
在我们的系统中,每一个页面都会定义一个ViewModel,该ViewModel存储页面所有的数据,并通过ajax读取数据并填写ViewModel。
假如我们有一个班级的页面,定义如下一个ViewModel:
//定义视图 var ClassViewModel = { ClassID:ko.observable(),//班级ID ClassName: ko.observable(),//班级名称 ClassMasterName: ko.observable(),//班主任 Students: ko.observableArray(),//班级学生列表 绑定数组 }; $(document).ready(function () { //绑定 ko.applyBindings(ClassViewModel); //添加学生信息 $("#AddStudent").on("click", function () { var obj = new Object(); obj.StuName = "杨过"; obj.StuSex = "猛男"; obj.StuAge = "100"; ClassViewModel.Students.push(obj); }); }); //ajax获取班级信息,并给ViewModel赋值 $.post("/home/GetClassInfo", function (data) { ClassViewModel.ClassID(data.ClassID);//班级ID赋值,会直接映射到界面 ClassViewModel.ClassName(data.ClassName); ClassViewModel.ClassMasterName(data.ClassMasterName); //获取学生信息 for (var i = 0; i < data.StuList.length; i++) { var obj = new Object(); obj.StuName=data.StuList[i].StuName; obj.StuSex=data.StuList[i].StuSex; obj.StuAge = data.StuList[i].StuAge; ClassViewModel.Students.push(obj); } })
对应的Html代码:
<script src="~/Scripts/jquery-1.7.1.min.js"></script> <script src="~/Scripts/knockout-3.2.0.js"></script> <script src="~/Scripts/ViewModel/MyClassViewModel.js"></script> <h2>MyClass</h2> <!-- attr属性绑定 --> 班级名称:<span data-bind="text:ClassID,attr:{‘ID‘:ClassID}"></span><br/> 班主任:<span data-bind="text:ClassName"></span><br/> <table> <tr> <th> 名字 </th> <th> 性别 </th> <th> 年龄 </th> </tr> <!--循环绑定 Students --> <tbody data-bind="foreach:Students"> <tr> <td data-bind="text:StuName"> </td> <td data-bind="text:StuSex"> </td> <td data-bind="text:StuAge"> </td> </tr> </tbody> </table> <br/> <input type="button" id="AddStudent" value="添加学生" />
后台数据:
public class HomeController : Controller { public ActionResult Index() { ViewBag.Message = "修改此模板以快速启动你的 ASP.NET MVC 应用程序。"; return View(); } public ActionResult About() { ViewBag.Message = "你的应用程序说明页。"; return View(); } public ActionResult Contact() { ViewBag.Message = "你的联系方式页。"; return View(); } public ActionResult MyClass() { return View(); } public JsonResult GetClassInfo() { MyClass myClass = new MyClass(); myClass.ClassID = "jsj001"; myClass.ClassName = "计算机一班"; myClass.ClassMasterName = "龙龙"; myClass.StuList = new List<Students>(); myClass.StuList.Add(new Students() { StuAge = "10", StuName = "张三", StuSex = "暖男" }); myClass.StuList.Add(new Students() { StuAge = "20", StuName = "李四", StuSex = "暖男" }); myClass.StuList.Add(new Students() { StuAge = "30", StuName = "王五", StuSex = "暖男" }); return Json(myClass); } } public class MyClass { /// <summary> /// 班级ID /// </summary> public string ClassID { get; set; } /// <summary> /// 班级名称 /// </summary> public string ClassName { get; set; } /// <summary> /// 班主任名称 /// </summary> public string ClassMasterName { get; set; } public List<Students> StuList { get; set; } } public class Students { public string StuName { get; set; } public string StuSex { get; set; } public string StuAge { get; set; } }
其他博文:MVC3.0+knockout.js+Ajax 实现简单的增删改查
本文参考:http://www.cnblogs.com/TomXu/archive/2011/11/21/2256749.html