返回目录

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

返回目录

MVVM架构~Knockoutjs系列之对象与对象组合的更多相关文章

  1. MVVM架构~knockoutjs系列之表单添加(验证)与列表操作源码开放

    返回目录 本文章应该是knockoutjs系列的最后一篇了,前几篇中主要讲一些基础知识,这一讲主要是一个实际的例子,对于一个对象的添加与编辑功能的实现,并将项目源代码公开了,共大家一起学习! knoc ...

  2. MVVM架构~Knockoutjs系列之验证机制的引入

    返回目录 对于Knockoutjs本身来说,没有提供验证模块,不过,有第三方的扩展,就像你为jquery库作extensions一样,这讲中我将介绍一个Knockout插件扩展,knockout.va ...

  3. MVVM架构~knockoutjs系列之Mapping插件为对象添加ko属性

    返回目录 对于一个JS对象来说,如果希望将所有属性进行监视,在之前我们需要一个个对属性添加ko.observable方法,而有了Mapping插件后,它可以帮助我们这件事. 在Mapping出现之前 ...

  4. MVVM架构~knockoutjs系列之为Ajax传递Ko数组对象

    返回目录 一些要说的 这是一个很有意思的题目,在KO里,有对象和数组对象两种,但这两种对象对外表现都是一个function,如果希望得到他的值,需要进行函数式调用,如ko_a(),它的结果为一个具体值 ...

  5. MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定

    返回目录 Knockoutjs是微软mvc4里一个新东西,用这在MVC环境里实现MVVM,小微这次没有大张旗鼓,而是愉愉的为我们开发者嵌入了一个实现MVVM的插件,这下面的几篇文章中,我和大家将一起去 ...

  6. MVVM架构~Knockoutjs系列之js接收C#数据集合的方式

    返回目录 在controller里将数据拿到,并且存储到ViewBag对象里,最后在View上显示出来,这是传统的MVC开发方式,事实上引入Knockoutjs以后,这种方式还是适合的,Knockou ...

  7. MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法

    返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...

  8. MVVM架构~knockoutjs系列之级联select

    返回目录 对于下拉列表框的绑定在之前的knockoutjs文章中已经介绍过,今天主要说一下级联的select,事实上,在knockoutjs里,是以数据绑定为中心的,而数据是以面向对象为前提的,而对于 ...

  9. MVVM架构~knockoutjs系列之包括区域级联列表的增删改

    返回目录 这个例子我做了几次,之前总是有BUG,目前测试后,确定没有BUG才发上来的,主要功能是实现“我的银行”模块的增删改的功能,这个里面包括了级联列表的区域选择,这部分是难点,在开发过程中,我们应 ...

随机推荐

  1. hdoj 2034 人见人爱A-B

    Problem Description 参加过上个月月赛的同学一定还记得其中的一个最简单的题目,就是{A}+{B},那个题目求的是两个集合的并集,今天我们这个A-B求的是两个集合的差,就是做集合的减法 ...

  2. ApiDoc 文档使用方式

    1.安装node.js 2.打开node.js 命令窗(shell)键入npm install apidoc -g 自动安装(几分钟) 3. C:\Users\user\AppData\Roaming ...

  3. IIS出现 分析器错误消息: 在应用程序级别之外使用注册为 allowDefinition='MachineToApplication' 的节是错误的

    这是因为发布的时候按了“生成部署包”

  4. iframe自适应高度,根据src中页面来得到。

    在页面布局时,div+iframe能根据具体的大小进行布局.但,对于iframe的适应大小,仍需js获取内部html文件来改变. function reinitIframe(){ var iframe ...

  5. Bootstrap 3 简介

    Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first pr ...

  6. 62. Unique Paths && 63 Unique Paths II

    https://leetcode.com/problems/unique-paths/ 这道题,不利用动态规划基本上规模变大会运行超时,下面自己写得这段代码,直接暴力破解,只能应付小规模的情形,当23 ...

  7. Python 学习---------Day4

    第十章 Python语句简介Python的代码书写要求,以及换行等语句可以扩越多行,只要将其封闭在圆括号内,方括号内或大括号内即可,可以使用分号终止.用\可以允许我们跨越多行一个简单的交互式循环whi ...

  8. Java 元注解

    元注解@Target,@Retention,@Documented,@Inherited * * @Target 表示该注解用于什么地方,可能的 ElemenetType 参数包括: * Elemen ...

  9. 使用Prism6 建立 Windows 10 通用程序.

    使用Prism6 建立 Windows 10 通用程序. 目标: 使用prism6,建立Windows 通用程序项目. 1, 解决方案—添加新建项目—通用—空白应用—输入名称—确定—确定 2 ,引用上 ...

  10. Android中 int 和 String 互相转换的多种方法

    1 如何将字串 String 转换成整数 int? A. 有两个方法: 1). int i = Integer.parseInt([String]); 或 i = Integer.parseInt([ ...