многомерный массив с помощью шаблонов Jquery

Question

Я следующий объекта JavaScript

var arr = [ 
    [ 
     { "id": 1, "name": "one" }, 
     { "id": 2, "name": "two" }, 
     { "id": 3, "name": "three" } 
    ], 
    [ 
     { "id": 4, "name": "four" }, 
     { "id": 5, "name": "five" }, 
     { "id": 6, "name": "six" } 
    ], 
] 

Я пытаюсь использовать jquery templates создать следующую HTML

<div class="row"> 
    <div class="cell"> 
     <span>1</span> : <span>one</span> 
    </div> 
    <div class="cell"> 
     <span>2</span> : <span>two</span> 
    </div> 
    <div class="cell"> 
     <span>3</span> : <span>three</span> 
    </div> 
</div> 
<div class="row"> 
    <div class="cell"> 
     <span>4</span> : <span>four</span> 
    </div> 
    <div class="cell"> 
     <span>5</span> : <span>five</span> 
    </div> 
    <div class="cell"> 
     <span>6</span> : <span>six</span> 
    </div> 
</div> 

Я Я использую следующие шаблоны с не удача :(

<script id="rowTemplate" type="text/x-jQuery-tmpl"> 
    <div class="row"> 
     {{tmpl "#cellTemplate"}} 
    </div> 
</script> 
<script id="cellTemplate" type="text/x-jQuery-tmpl"> 
    <div class="cell"> 
     <span>${id}</span> : <span>${name}</span> 
    </div> 
</script> 

Линия е, что вызывает шаблон выглядит следующим образом:

$("#rowTemplate").tmpl(arr).replaceAll("#somediv"); 

Я получаю только одну строку с одной ячейкой, без данных ...

<div class="row"> 
    <div class="cell"> 
     <span></span> : <span></span> 
    </div> 
</div> 

Что я делаю неправильно?

Answer 1

Я думаю, проблема связана с использованием replaceAll и отсутствующим параметром tmpl в шаблоне. Попробуйте это (воспользуйтесь заменойWith для #someDiv и передайте $ data в качестве параметра tmpl для дочернего шаблона):

<script type="text/javascript"> 
    var arr = 
    [ 
     [ 
      { 
        "id": 1, 
        "name": "one" 
      }, 
      { 
        "id": 2, 
        "name": "two" 
      }, 
      { 
        "id": 3, 
        "name": "three" 
      } 
     ], 
     [ 
      { 
        "id": 4, 
        "name": "four" 
      }, 
      { 
        "id": 5, 
        "name": "five" 
      }, 
      { 
        "id": 6, 
        "name": "six" 
      } 
     ] 
    ]; 

    $(function(){ 
     $("#somediv").replaceWith($("#rowTemplate").tmpl(arr)); 
    }); 
</script>  
<script id="rowTemplate" type="text/x-jQuery-tmpl"> 
      <div class="row"> 
       {{tmpl($data) "#cellTemplate"}} 
      </div> 
</script> 
<script id="cellTemplate" type="text/x-jQuery-tmpl"> 
     <div class = "cell"><span>${id}</span>:<span>${name}</span></div> 
</script> 
<div id="somediv"></div>