2013-04-17 2 views
4

Я хочу создать таблицу древовидной структуры.JQuery Нокаут для/внутри цикла внутри шаблона

У меня есть 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 столбцов, которые мне нужны для каждой строки?

+0

У вас посмотрел http://stackoverflow.com/questions/11509324/recursive-tr-with-knockout-js-and-jquery-template?rq=1 Кажется похожим на то, что вы хотите. –

+0

Это решение проблемы с вложенными шаблонами, но это не то, что мне нужно :( – Catalin

ответ

1

Я думаю, что в точке зрения MVVM вы перегружаете разметку; Итак, мое предложение: почему вы не определяете вычисленное значение, которое возвращает массив элементов из viewModel?

Например, 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, вы вставите тд/тр)

+0

Это на самом деле очень хорошая идея. Она решает проблему. – Catalin

Смежные вопросы