模板内的Jquery Knockout for / while循环答案

【问题标题】：Jquery Knockout for/while loop inside template模板内的Jquery Knockout for / while循环
【发布时间】：2013-04-09 23:48:59
【问题描述】：

我想创建一个树形结构表。

我有行的 json 数组。一行可以有其他子行。

[
   {
      "Name": "Row 1",
      "Depth": 1,
      "Rows": [{ "Name": "Row 1.1", "Depth": 2, "Rows": [] }]
   },
   {
      "Name":" Row 2",
      "Depth": 1,
      "Rows": []
   }
]

我的一行模板（不起作用）如下所示：

<script type="text/html" id="row-template">
   <tr>
       {{ for(var i = 1; i<= Depth; i++) { }}
          <td class='col'></td>
       {{/for}}

       <td data-bind="text: Name"></td>
   </tr>
</script>

有没有什么方法可以在敲除模板中使用重复语句，这样我就可以为每一行附加我需要的额外 n 列？

【问题讨论】：

你看过stackoverflow.com/questions/11509324/… 好像和你想要的差不多。
解决了嵌套模板问题，但不是我需要的:(

标签： javascript jquery knockout.js

【解决方案1】：

我认为，从 MVVM 的角度来看，您过度使用了标记；所以，我的建议是：为什么不定义一个从 viewModel 返回元素数组的计算？

例如，视图模型

function MyViewModel() {
    var self = this;

    self.Depth= ko.observable(10);


   self.DepthRepeated= ko.computed(function(){
       var ret = [];
       for(var i =0; i<self.Depth(); i++)
        ret.push(i);//note: very dirty way to create/populate an array!..but it's just for PoC

       return ret;

   });
}

HTML：

<div data-bind="foreach: DepthRepeated"></div>

（当然，在html部分我插入了一个div，你会插入td/tr）

【讨论】：