Knockout学习（3）之observableArray，监控数组，列表（循环绑定）

ko对于数组列表，监控跟踪属性值关键字为：observableArray，

绑定值关键字为：foreach

@{ViewBag.Title = "Index3";
}<h2>Index3</h2>
<head><script src="~/Scripts/jquery-1.10.2.min.js"></script><script src="~/Scripts/KnockOut.js"></script><script>$(function () {var UserInfos = [{ id: 1, name: "张三", age: "21", aclass: "1801" },{ id: 2, name: "李四", age: "22", aclass: "1802" },{ id: 3, name: "王五", age: "23", aclass: "1803" }];var ViewModel = {};ViewModel = function (){this.UserInfos = ko.observableArray(UserInfos);               }ko.applyBindings(ViewModel);          });</script>
</head>
<body><table border="1"><thead><tr><td>编号</td><td>姓名</td><td>年龄</td><td>班级</td></tr></thead><tbody data-bind="foreach:UserInfos"><tr><td data-bind="text:id"></td><td data-bind="text:(name=='张三'?'张三老师':name)"></td>@*ko里面也可以写逻辑代码：例如当循环到姓名为张三时，输出张三老师；*@<td data-bind="text:age"></td><td data-bind="text:aclass"></td></tr></tbody></table>
</body>

展示如下：

我们也可以动态新增，代码如下：

@{ViewBag.Title = "Index3";
}<h2>Index3</h2>
<head><script src="~/Scripts/jquery-1.10.2.min.js"></script><script src="~/Scripts/KnockOut.js"></script><script src="~/Scripts/jquery.json.min.js"></script><script src="~/Scripts/knockout-map.js"></script><script>$(function () {var UserInfos = [{ id: 1, name: "张三", age: "21", aclass: "1801" },{ id: 2, name: "李四", age: "22", aclass: "1802" },{ id: 3, name: "王五", age: "23", aclass: "1803" }];var ViewModel = {};ViewModel = function (){this.UserInfos = ko.observableArray(UserInfos);this.addUser = function (){this.UserInfos.push({ id: -1, name: "新同学", age: "21", aclass: "1801" });}}ko.applyBindings(ViewModel);          });</script>
</head>
<body><table border="1"><thead><tr><td>编号</td><td>姓名</td><td>年龄</td><td>班级</td><td>ko自动排序</td></tr></thead><tbody data-bind="foreach:UserInfos"><tr><td data-bind="text:id"></td><td data-bind="text:name"></td><td data-bind="text:age"></td><td data-bind="text:aclass"></td><td data-bind="text:$index"></td>@*这里我新增了一列，在ko里面，有一个自动排序属性：$index,这样循环时，此列的值就会递增*@</tr></tbody></table><br /><input value="新增" type="button" data-bind="click:addUser" />
</body>

效果如下：

Knockout学习（3）之observableArray，监控数组，列表（循环绑定）相关推荐

Visual Basic Script 程序参考手册-学习第4天：数组列表及Msgbox函数
VBS(Visual Basic Script)初识及入门 - 数组及 msgbox函数一. 数组列表 (一) 静态的数组列表 Dim astrPhoneList(2,4) '从这里就知道了该列表 ...
knockoutJS学习笔记06：ko数组与模板绑定
前面已经介绍了基本的绑定和模板相关知识,接下来就看ko里的数组和模板绑定,数组和模板绑定应该是实际项目中用得比较多的,ko提供了很好的支持. 一.observaleArray 前面的监控属性都是单个对 ...
vant组件之van-popover气泡框结合list数组列表循环使用
<van-col span="6" class="dzmyBulk_xmCol" @click="stopUrlHref">&l ...
knockout学习笔记目录
关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...
go语言基础数据结构学习---- 数组, 列表(list)和切片(slice)
go语言基础数据结构学习–> 数组, 列表(list)和切片(slice) go 语言中的数组是类型相同的元素的集合, 列表是双链表的容器, 可以添加不同类型的数据切片是对现有数组的引用, 比 ...
knockout学习笔记
学习knockout路程中记下的一些容易遗忘和稍微难理解的知识点,学习地址"knockout.js爱整理" 1.<!–ko–>和<!–/ko–>的用法有时 ...
深度学习模型调试和监控（7.2）
Keras 高级用法:函数式 API 7.1(二) Keras 高级用法:函数式 API 7.1(一) 7.2 深度学习模型调试和监控本小节学习如何监控模型训练的过程. 7.2.1 模型训练中应用回 ...
Python学习打卡【Task4】列表，字典和元组
目录一.学习知识点概要(review) 二.学习内容(record) 三.学习问题与解答(analysis) 四.学习思考与总结(summary) 一.学习知识点概要(review) ...
遇见 vue.js --------阿文的vue.js学习笔记（8 —1）------- 列表渲染
** 新学习新征程,我们一起踏上学习 vue.js的新长征遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的v ...

Knockout学习（3）之observableArray，监控数组，列表（循环绑定）

Knockout学习（3）之observableArray，监控数组，列表（循环绑定）相关推荐

最新文章

热门文章