$root knockout
http://www.cnblogs.com/rohelm/p/3209757.html
以列表方式呈现数据
处理以数组形式储存的多条数据，要先认识foreach。在ViewModel定义一个JavaScript Array或是ko.observableArray() (observableArray在新增或剔除数组元素时，KO会立刻察觉反应到UI，普通Array则不会)，然后在某个容器元素(例如: div, ul, tbody... )声明data-bind="foreach: arrayPropName"，就可以指定KO将容器内的子元素模板(Template)就会对数组对象的数据自动循环遍历，例如:
<tbody data-bind="foreach: users">
<tr>
<td><span data-bind="text: id"></span></td>
<td><span data-bind="text: name"></span></td>
<td><span data-bind="text: score" style='text-align: right'></span></td>
<td><a href='#' data-bind="click: $root.removeUser">移除</a></td>
</tr>
</tbody>
在上面的例子中，我们假设ViewModel有一个数组属性—users，其中每笔数据对象都有id, name, score三个属性，在tbody上宣告data-bind="foreach: users"，意味者<tbody>到</tbody>间的内容，会依users数组的元素多寡重复出现n次。而其中元素(如<span>, <a>)系结对象便是users中的每一条用户数据，因此只要写上data-bind="text: id"就可以对应到用户的id属性。最后一个<td>中出现了<a data-bind="click: $root.removeUser">，你一定可以猜想它可用来移除该用户数据，$root是一个特殊变量，会指向ViewModel个体。在这里必须加上的原因是我们在ViewModel定义了remoteUser方法，但在<tbody>中，默认绑定的对象是users对象，若只写data-bind="click: removeUser"，KO会误认成users对象上的removeUser方法。加上$root，KO会改由ViewModel的最上层寻找removeUser方法。
removeUser的定义如下：
self.removeUser = function(user) {
self.users.remove(user);
}
当它在foreach范围被点击触发时，会接收到一个参数，指向被点击的那条数据对象。所以，只需self.users.remove(user)就可以将该条数据从observableArray移除，网页也会马上做出回应，该条数据的<tr>会立刻从<tbody>中消失。
如果要新增用户数据，在observableArray中加入一条具有id, name, score三个属性的对象即可，为了规范组件包含所有必要属性，我们将user定义成function模拟ViewModel形式的对象:
function UserViewModel(id, name, score) {
var self = this;
self.id = id;
self.name = name;
self.score = score;
}
如此新增数据时即可写成viewModel.users.push(new UserViewModel("0001", "halower", 125)),为了展现KO可以实时监控obervableArray的风吹草动，我们写一个ko.computed计算所有用户的score总和:
self.totalScore = ko.computed(function () {
var total = 0;
$.each(self.users(), function (i, u) {
total += u.score;
});
return total;
});
共 <span data-bind="text: users().length"></span> 条，
合计 <span data-bind="text: totalScore"></span> 分
完整代码如下：
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index2</title>
<script src="~/Scripts/jquery-2.0.3.js"></script>
<script src="~/Scripts/knockout-2.3.0.js"></script>
<script type="text/javascript">
//定义user数据对象
function UserViewModel(id,name,score) {
var self = this;
self.id = id;
self.name = name;
self.score = score;
}
//定义ViewModel
function ViewModel() {
var self = this;
self.users = ko.observableArray();//添加动态监视数组对象
self.removeUser = function (user) {
self.users.remove(user);
}
self.totalscore = ko.computed(function () {
var total = 0;
$.each(self.users(), function (i, u) {
total += u.score;
})
return total;
});
};
$(function () {
var vm = new ViewModel();
//预先添加一些数据
vm.users.push(new UserViewModel("d1", "rohelm", 121));
vm.users.push(new UserViewModel("d2", "halower", 125));
$("#btnAddUser").click(function () {
vm.users.push(new UserViewModel(
$("#u_id").val(),
$("#u_name").val(),
parseInt($("#u_score").val())));
});
ko.applyBindings(vm);
});
</script>
</head>
<body>
<section style="margin:250px">
<section>
ID<input type="text" id="u_id" style="width:30px">
Name<input type="text" id="u_name" style="width:30px">
Score<input type="text" id="u_score" style="width:30px"><br/>
<input value="Add" id="btnAddUser" type="button" style="width:200px; "/><br/>
共 <span data-bind="text: users().length"></span> 条--------------合计 <span data-bind="text: totalscore"></span> 分
</section>
<section>
<table>
<thead>
<tr><th>ID</th><th>Name</th><th>Score </th><th>Option</th></tr>
</thead>
<tbody data-bind="foreach: users">
<tr>
<td><span data-bind="text: id"></span></td>
<td><span data-bind="text: name"></span></td>
<td><span data-bind="text: score"></span></td>
<td><a href='#' data-bind="click: $root.removeUser">Remove</a></td>
</tr>
</tbody>
</table>
</section>
</section>
</body>
</html>
效果演示：
随机推荐
- 纯CSS3制作卡通场景汽车动画效果
前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
- alert，confirm和prompt
1.警告消息框alertalert 方法有一个参数,即希望对用户显示的文本字符串.该字符串不是 HTML 格式.该消息框提供了一个“确定”按钮让用户关闭该消息框,并且该消息框是模式对话框,也就是说,用 ...
- 那些OVER的封装
什么over什么,如pppoe, ppp的封装都在over对象之后,入下图: PPPOE Ipsec
- C语言 详解多级指针与指针类型的关系
//V推论①:指针变量的步长只与‘指针变量的值’的类型有关(指针的值的类型 == 指针指向数据的类型) //指针类型跟指针的值有关,指针是占据4个字节大小的内存空间,但是指针的类型却是各不相同的 // ...
- jQuery调用WCF服务传递JSON对象
下面这个示例使用了WCF去创建一个服务端口从而能够被ASP.Net页面通过jQuery的AJAX方法访问,我们将在客户端使用Ajax技术来 与WCF服务进行通信.这里我们仅使用jQuery去连接Web ...
- Objective-c基础学习
核心内容 标识号 OC语言中,对各种变量,方法和类等要素命名时使用的字符序列称为标识符. OC标识符命名规则标识符由字母,下划线“_”,美元符号“$”和数字组成,标识符必须以字母,下划线,美元符号开头 ...
- Java系列：报错信息The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
Javaweb工程类中没有添加Tomcat运行时相关类导致. 下面是具体的解决方法: 1.右击web工程->属性或Build Path->Java Build Path->Libra ...
- [CareerCup] 8.2 Call Center 电话中心
8.2 Imagine you have a call center with three levels of employees: respondent, manager, and director ...
- 利用mstsc远程桌面传送文件，记录一下
尼玛之前服务器上传有点异常,在服务器装了一个上传下载监控的软件,用的是什么 绿色版QQ流量监控,绿色是挺绿色的,装了就等哭吧.没时间打字反正就是删除不了,后来想办法删除了.艹.所有服务除了系统服务能上 ...
- 数据结构之链表C语言实现以及使用场景分析
牢骚:本篇博客两个星期前已经存为草稿,鉴于发生一些糟糕的事情,今天才基本完成.本人6月份应届毕业生一枚,毕业后当天来到帝都,之后也非常顺利,面试了俩家公司都成功了.一家做C++方面电商ERP,一家做w ...