01knockout应用开发之遍历简单数据$Index、$data

在knockout环境下，如何遍历一个简单的数组？对于遍历对象组件的数组来说，很容易，直接foreach:对象名，然后进行属性的绑定即可，而如下数据[10,20,30]这种简单的数组，如何去遍历呢？在阅读knockout官网后，找到了答案，如下实例：

 <label>博主</label>     <div data-bind="text:User.title"></div>     <label>地域</label><div data-bind="text:User.address"></div>     <label>所经历的等级  </label>     <ul data-bind="foreach:Level">         <li>索引：<span data-bind="text: $index"></span>，数值：<span data-bind="text: $data"></span></li>     </ul>     <label>所购买的  </label>     <div data-bind="foreach:SaleDetail">         [<span data-bind="text:id"></span>]&nbsp;&nbsp;<span data-bind="text:memo"></span>&nbsp;&nbsp;[<a href="javascript:;" data-bind="click:$parent.remove">移除</a>]<hr />     </div>     <script type="text/javascript">         var Demo = function () {             var self = this;             self.User = { title: "test knockout js", address: "beijing" };             self.Level = [10, 20, 30, 40, 50];             self.SaleDetail = ko.observableArray([                 { id: 1, memo: '2005-01,消费购买了水壶' },                 { id: 2, memo: '2006-03,消费购买了手机' },                 { id: 3, memo: '2006-10,消费购买了手机' }             ]);              for (var i = 0; i < 5; i++) {                 self.SaleDetail.push({ id: i + 4, memo: '2005-01,消费购买了水壶' })             }              self.remove = function () {                 self.SaleDetail.remove(this);             }         }          ko.applyBindings(new Demo());     </script>

重要看一下ＨＴＭＬ部分

其中$index表示为组件的索引值，它从０开始，$data表示这个索引对应的具体的值，看一下程序运行结果的截图

转载于:https://www.cnblogs.com/duyao/p/4351336.html

01knockout应用开发之遍历简单数据$Index、$data相关推荐

Android开发：实现简单的问卷调查
Android开发:实现简单的问卷调查 1.activity_main.xml 主界面整体是由ScrollView控件控制,ScrollView它继承自FrameLayout,所以它是一种特殊类型的F ...
go 程序包开发，读简单配置文件 v1
go 程序包开发,读简单配置文件 v1 一.作业要求 https://pmlpml.gitee.io/service-computing/post/ex-pkg-ini/ 二.具体实现 watch函数 ...
iOS开发UI篇—简单介绍静态单元格的使用
iOS开发UI篇-简单介绍静态单元格的使用一.实现效果与说明说明:观察上面的展示效果,可以发现整个界面是由一个tableview来展示的,上面的数据都是固定的,且几乎不会改变. 要完成上面的效果, ...
python小项目实例流程-Python小项目：快速开发出一个简单的学生管理系统
原标题:Python小项目:快速开发出一个简单的学生管理系统本文根据实际项目中的一部分api 设计抽象出来,实例化成一个简单小例子,暂且叫作「学生管理系统」. 这个系统主要完成下面增删改查的功能: ...
python小项目案例-Python小项目：快速开发出一个简单的学生管理系统
本文根据实际项目中的一部分api 设计抽象出来,实例化成一个简单小例子,暂且叫作「学生管理系统」. 这个系统主要完成下面增删改查的功能: 包括: 学校信息的管理教师信息的管理学生信息的管理根据A ...
java遍历对象属性_java开发中遍历一个对象的所有属性并set值缓存优化
今天技术之家陪你一起了解java开发中遍历一个对象的所有属性并set值缓存优化: Java反射 1.创建缓存池,可以加快访问速度private static final Map> CACHE ...
李洪强iOS开发之- 实现简单的弹窗
李洪强iOS开发之- 实现简单的弹窗实现的效果: 112222222222223333333333333333
LayaAir引擎开发HTML5最简单教程(面向JS开发者)
LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...
《Java Web开发入门很简单》学习笔记
<Java Web开发入门很简单>学习笔记 1123 第1章了解Java Web开发领域 Java Web主要涉及技术包括:HTML.JavaScript.CSS.JSP.Servlet ...
python项目开发实例-Python小项目：快速开发出一个简单的学生管理系统
本文根据实际项目中的一部分api 设计抽象出来,实例化成一个简单小例子,暂且叫作「学生管理系统」. 这个系统主要完成下面增删改查的功能: 包括: 学校信息的管理教师信息的管理学生信息的管理根据A ...

01knockout应用开发之遍历简单数据$Index、$data

01knockout应用开发之遍历简单数据$Index、$data相关推荐

最新文章

热门文章