码迷,mamicode.com
首页 > 编程语言 > 详细

MVVM架构~knockoutjs系列之数组的$index和$data

时间:2014-10-13 17:04:29      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   ar   java   for   

返回目录

已经写了很多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>]&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>

重要看一下HTML部分

bubuko.com,布布扣

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

bubuko.com,布布扣

 

返回目录

MVVM架构~knockoutjs系列之数组的$index和$data

标签:style   blog   http   color   io   os   ar   java   for   

原文地址:http://www.cnblogs.com/lori/p/4022284.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!