javascript - 模板内的Jquery Knockout for / while循环

Question

我想创建一个树结构表。

我有行的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以为每一行附加我需要的额外列？

Answer 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）