您的位置:首页 > Web前端 > JavaScript

ko.js 数据遍历——获取索引

2015-09-25 10:28 471 查看
<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="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>


重要看一下HTML部分

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

转自http://www.cnblogs.com/lori/p/4022284.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: