$index and $data of arrays of the MVVM schema ~knockoutjs series

Back to Catalog

Have written a lot of Knockoutjs articles, today in the review code, suddenly see a problem, in the knockout environment, how to traverse a simple array? For iterating over an array of object components, it is easy to directly foreach: Object name and then bind the property, and the following data [10,20,30] This simple array, how to traverse it? After reading the knockout official website, found the answer, the following example:

<label> bo Master </label> <div data-bind="Text:User.title"></div> <label> Regional </label><div data-bind="text:User.address"></div> <label> level of experience </label> <ul data-bind="Foreach:level"> <li> index: <span data-bind="text: $index"></span>, Value: <span data-bind="text: $data"></span></li> </ul> <label> purchased </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"> Remove </a>]"Text/javascript">varDemo =function () {varSelf = This; Self. User= {title:"Test Knockout JS", Address:"Beijing" }; Self. level= [Ten, -, -, +, -]; Self. Saledetail=Ko.observablearray ([{ID:1, Memo:'2005-01, the consumer bought a kettle'}, {ID:2, Memo:'2006-03, consumer purchase of mobile phone'}, {ID:3, Memo:'2006-10, consumer purchase of mobile phone' }            ]);  for(vari =0; I <5; i++) {self. Saledetail.push ({id:i+4, Memo:'2005-01, the consumer bought a kettle'})} Self.remove=function () {self. Saledetail.remove ( This); }} ko.applybindings (NewDemo ()); </script>

Important look at the HTML section

Where $index is represented as the index value of the component, which starts at 0, $data represents the specific value of the index, and the results of the program run

Back to Catalog

$index and $data of arrays of the MVVM schema ~knockoutjs series