MVVM架构~knockoutjs与MVC配合,实现列表的增删改功能
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()); });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。