MVC与MVVM的模型
在MVC实例项目中，为我们提供了简单的增删改查功能，而这种功能的实现与具体的Model很有关系，或者说它与后台数据库的关系过于紧密了，而对于开发人员来说当页面布局修改后，也会现时修改它们的Model部分，而对于MVVM思想体系来说，它可以不去修改后台Model，而后采用了一种前台绑定的方式，很好的实现了前台模块与后台Model的解耦！
实例代码
本实例主要展现了一个简单的列表操作，包括了添加，删除和修改，在使用knockoutjs实现它之后，使它的用户体验提升了一个台阶，对于代码的分层有了一个新的升华！
C#核心代码
public ActionResult Index() { return View(new List<Product> { new Product{ID=1,Name="test1"}, new Product{ID=2,Name="test2"}, new Product{ID=3,Name="test3"}, new Product{ID=4,Name="test4"}, new Product{ID=5,Name="test5"}, new Product{ID=6,Name="test6"}, }); }
JS核心代码
var People = function () { this.ID = 0; this.Name = ""; } var model = function () { self = this; self.PeopleList = ko.observableArray(@Html.Raw(Json.Encode(Model))); self.remove = function (o) { self.PeopleList.remove(o); }; self.selectItem = ko.observable(); self.editing = ko.observable(false); self.add = function (o) { self.editing(true); self.selectItem(new People()); } self.edit = function (o) { self.editing(true); self.selectItem(o); } self.selectItem.subscribe(function (o) { // alert("要编辑记录ID是" + o.ID); }); self.save = function (o) { alert((o.ID > 0 ? "修改数据" : "新建数据") + o.Name); } self.cancle = function () { self.editing(false); } }
HTML核心代码
<h3> <a href="javascript:void(0)" data-bind="click:add">添加实体</a></h3> <table> <thead> <tr> <th>编号</th> <th>姓名</th> <th></th> </tr> </thead> <tbody data-bind="template:{name:‘list‘,foreach: PeopleList}"> </tbody> </table> <script type="text/html" id="list"> <tr> <td><span data-bind="text:ID"></span></td> <td><span data-bind="text:Name"></span> </td> <td><a href="javascript:void(0)" data-bind="click:$parent.remove">删除</a> <a href="javascript:void(0)" data-bind="click:$parent.edit">编辑</a> </td> </tr> </script> <fieldset data-bind="with:selectItem,visible:editing"> <legend>正在<span data-bind="if:ID==0">新建</span><span data-bind="if:ID>0">编辑</span></legend> 姓名： <input type="text" data-bind="value:Name" /> <input type="button" data-bind="click:$parent.save" value="保存" /> <input type="button" data-bind="click:$parent.cancle" value="取消" /> </fieldset>
运行效果图：
$.when实现方法回调
下面介绍JQ里的一个小功能，$.when($.ajax({})).done().done()....，它可以方便的实现方法的回调，done()代码块相关于ajax里的success节点里的内容，将代码从success节点拿出来，放到done()里，它可以使代码的层次感和可能性更强！
$.when($.ajax({ url: "/home/getProduct", dataType: "JSON", type: "GET", success: function (data) { alert(JSON.stringify(data)); } })).done(function () { alert("哈哈，回调成功了！"); }) .done(function () { ko.applyBindings(new model()); });