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返回一个元素数组的computed？

例如，视图模型

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）

Jquery Knockout for / while循环模板内部

1 个答案: