MVVM架構(gou)~knockoutjs系列之數組的(de)$index和$data
已經寫了(le)很多knockoutjs的(de)(de)文章了(le),今(jin)天在(zai)review代碼時,忽然(ran)看到一個(ge)問題(ti),在(zai)knockout環境下(xia)(xia),如何遍歷(li)一個(ge)簡(jian)(jian)單的(de)(de)數(shu)組(zu)?對于(yu)遍歷(li)對象組(zu)件的(de)(de)數(shu)組(zu)來說,很容(rong)易(yi),直接(jie)foreach:對象名,然(ran)后(hou)進行屬性的(de)(de)綁定(ding)即(ji)可(ke),而如下(xia)(xia)數(shu)據[10,20,30]這種簡(jian)(jian)單的(de)(de)數(shu)組(zu),如何去(qu)遍歷(li)呢?在(zai)閱讀(du)knockout官網后(hou),找(zhao)到了(le)答案,如下(xia)(xia)實例:
<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,消費(fei)購(gou)買了水(shui)壺' },
{ id: 2, memo: '2006-03,消費購買了手(shou)機(ji)' },
{ id: 3, memo: '2006-10,消費購買(mai)了手機' }
]);
for (var i = 0; i < 5; i++) {
self.SaleDetail.push({ id: i + 4, memo: '2005-01,消(xiao)費購(gou)買了水(shui)壺(hu)' })
}
self.remove = function () {
self.SaleDetail.remove(this);
}
}
ko.applyBindings(new Demo());
</script>
重要看一下(xia)HTML部分
其中$index表示為(wei)組件的索引(yin)值(zhi),它從0開始,$data表示這個索引(yin)對應的具體的值(zhi),看一下程序運行(xing)結果的截圖