在面向对象的程序设计里,对象是核心,一切皆为对象,对象与对象之间的关系可以表现为继承和组合,而在Knockoutjs或者JS里,也存在着对象的概念,今天主要说一下JS里的对象及对象的组合。
JS里对象可以使用{}生成,也可以使用function(){}方式生成,而使用function(){}方式我认为更灵活,使用{}方式更正规,我这里总结了一下,也是我的习惯,如果对象只是getter,setter的属性块,
可以使用{}的方式,如果对象比较复杂,由属性,方法 组成,这时最好使用function(){}的方式,下面举例说明。
下面定义一个user对象,使用{}方式
var User={ Name:"zzl", Gander:"male" }
下面是一个User对象的function(){}的形式
var User=function(){ this.Name="zzl"; this.Gander="male"; } //为了调用上的方便,层次的清晰,我们在调用根元素时,最好把this重新定义,看下面代码: var User=function(){ var self=this;//这里的self表示User对像 self.Name="zzl"; self.Gander="male"; self.Remove=function(){ console.log(this.Name);//这里的this表示当前你触发的记录(user可以有多个) } }
好了,有了对象的概念之后,我们来看一下Knockoutjs里如何使用对象,事实上,在Knockoutjs里的viewmodel,即我们的页面数据绑定源,就是一个对象,它也完全支持{}和function(){}两种方式,而我习惯上使用第二次,呵呵,下面我们为view返回一个userList的viewmodel,用来输出一个user对象的集合,将它绑定到<table>元素上。
JS部分代码:
var User = function (id, name) { self = this; self.id = ko.observable(id); self.name = ko.observable(name); self.editing = ko.observable(false); self.edit = function () {//这里的this是当前调用的对象,而不是UserList,而self才是UserList对象,这也是为什么要使用var self = this语句的原因 this.editing(true); } }; //集合属性和方法 var UserList = function () { var self = this; self.users = ko.observableArray(); for (var i = 0; i < 10; i++) { self.users.push(new User(i, "zzl")); } // Behavior Remove self.removePerson = function () {//data-bind="click:$parent.removePerson"//这句为调用当前对象的父对象上的方法 self.users.remove(this); } } ko.applyBindings(new UserList());//像view返回一个User集合
看一下HTML代码:
<div class="liveExample"> <table> <thead> <tr> <th>编号</th> <th>姓名</th> <th></th> </tr> </thead> <tbody data-bind="template:{name:'list',foreach: users}"> </tbody> </table> </div> <script type="text/html" id="list"> <tr> <td data-bind="text:id"></td> <td> <input type="text" data-bind="value:name, click:edit" /></td> <td> <a href="#" data-bind="click:$parent.removePerson">移除</a> <span data-bind="visible:editing"><a data-bind='click:save'>保存</a></span> </td> </tr> </script>
上面的实例中,实现了对象集合的移除操作,即从users里移除一个User对象,而保存按钮的显示是通过你是否单击文本框决定的,而代码中的$parent.removePerson意思是说,调用users对象的上一级对象的removePerson方法,如果在C#里,这个结构
会是这样实现,看代码:
classUser
{ public int Id{get;set;} public string Name{get;set;} } class UserList
{ public User[] Users{get;set;} public void RemovePerson(User entity)
{ this.Users.Remove(entity); } }
怎么样,看了我的C#代码分析,学起JS来也不那么费力了吧,呵呵。
本文转自博客园张占岭(仓储大叔)的博客,原文链接:MVVM架构~Knockoutjs系列之对象与对象组合,如需转载请自行联系原博主。