首页 > 代码库 > MVVM架构~knockoutjs系列之数组的$index和$data
MVVM架构~knockoutjs系列之数组的$index和$data
返回目录
已经写了很多knockoutjs的文章了，今天在review代码时，忽然看到一个问题，在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>] <span data-bind="text:memo"></span> [<a href=http://www.mamicode.com/"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表示这个索引对应的具体的值，看一下程序运行结果的截图
返回目录
MVVM架构~knockoutjs系列之数组的$index和$data
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。