Jquery Knockout for / while循环模板内部

时间:2013-04-17 09:21:24

标签: javascript jquery knockout.js

我想创建一个树结构表。

我有行的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列?

1 个答案:

答案 0 :(得分:2)

我认为,从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)