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>]&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表示這個索引對應的具體的值，看一下程序運行結果的截圖

 

返回目錄