ViewModelを作ってko.observableArrayオブジェクトに配列を入れ、
ko.applyBindings()でViewModelを指定。
テーブルの方には<tbody>要素にdata-bind="foreach: ***"を、
<td>要素にdata-bind="text: ***"を埋め込めばOKそうです。
【ソース：】
| <head> <title>KnockoutTest1</title> <script src="Scripts/jquery-1.7.2.min.js"></script> <script src="Scripts/knockout-2.1.0.js"></script> </head> <body> <table> <thead> <tr> <th>プロパティ名</th> <th>型</th> <th>値</th> <th>日時</th> </tr> </thead> <tbody data-bind="foreach: items"> <tr> <td data-bind="text: pName"></td> <td data-bind="text: pType"></td> <td data-bind="text: val"></td> <td data-bind="text: date"></td> </tr> </tbody> </table> <script type="text/javascript"> var model = { items: ko.observableArray([ { pName: "pro1", pType: "string", val: 45, date: "2012/05/30 00:00:00" }, { pName: "pro2", pType: "string", val: 34, date: "2012/05/30 00:00:00" }, { pName: "pro3", pType: "string", val: 56, date: "2012/05/30 00:00:00" }, { pName: "pro4", pType: "string", val: 2, date: "2012/05/30 00:00:00" }, { pName: "pro5", pType: "string", val: 54, date: "2012/05/30 00:00:00" }, { pName: "pro6", pType: "string", val: 74, date: "2012/05/30 00:00:00" }, { pName: "pro7", pType: "string", val: 12, date: "2012/05/30 00:00:00" } ]) }; ko.applyBindings(model); </script> </body> </html> |
【出力】：
|
0 件のコメント:
コメントを投稿