在面向对象的程序设计里,对象是核心,一切皆为对象,对象与对象之间的关系可以表现为继承和组合,而在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 = ; i < ; 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来也不那么费力了吧,呵呵。