Перебор массив внутри KendoUI шаблон

Question

Я связывание массива объектов в шаблон кэндо со следующим кодом:

<script id="Template4" type="text/x-kendo-template"> 
    <div class="row"> 
      # for (var i = 0; i < data.length; i++) { # 
      <div class="col-md-6 " data-maxpanel="4">     
      </div> 
      # } # 
    </div>  
</script> 

<div class="page-detail container-fluid" id="canvas" data-bind="source: javascriptData" data-template="Template4">   
</div> 

<script> 
    var javascriptData = [{ Name: "First" }, { Name: "Second" }, { Name: "Third" }]; 
    var Model = kendo.observable({ 
     javascriptData: javascriptData 
    }); 

    kendo.bind($("#canvas"), Model); 
</script> 

Проблема в том, что я получаю 3 экземпляра класса строки DIV и мой цикл имеет только один элемент. Я могу понять, что это рендеринг шаблона для каждого элемента моего массива. Я хочу добиться того, что только один экземпляр шаблона визуализируется и что я могу перебирать каждую из записей внутри шаблона. Я перемещаюсь с Handlebars, где поведение немного отличается, мой цикл работает успешно.

Я знаю, что могу создать внешний массив только с одной записью, а затем это сработает, но было интересно, есть ли лучший способ.

например.

var javascriptData = [{ Name: "First" }, { Name: "Second" }, { Name: "Third" }]; 

var jsList = []; 
jsList.push(javascriptData); 

var Model = kendo.observable({ 
    javascriptData: jsList 
}); 

Answer 1

Если вы хотите перебрать в элементы вашего массива javascriptData то, что вы можете сделать, это определить шаблон, как:

<script id="Template4" type="text/x-kendo-template"> 
    <div class="col-md-6 " data-maxpanel="4">#= Name #</div> 
</script> 

, а затем canvas как:

<div class="page-detail container-fluid" id="canvas"> 
    <div class="row" data-bind="source: javascriptData" data-template="Template4"> 
    </div> 
</div> 

Т.е. Вы перемещаете внешний div из Template4 (строка) в HTML. Таким образом, canvas привязан к модели, но row привязан к массиву javascriptData модели.

Проверьте это в следующем фрагменте

$(document).ready(function() { 
 
    var javascriptData = [ 
 
    { Name: "First" }, 
 
    { Name: "Second" }, 
 
    { Name: "Third" } 
 
    ]; 
 
    var Model = kendo.observable({ 
 
    javascriptData: javascriptData 
 
    }); 
 
    kendo.bind($("#canvas"), Model); 
 
});

.page-detail { 
 
    margin: 5px; 
 
    border: 1px solid green; 
 
} 
 

 
.col-md-6 { 
 
    padding: 5px; 
 
    margin: 5px; 
 
    border: 1px solid blue; 
 
} 
 

 
.row { 
 
    margin: 5px; 
 
    border: 1px solid red; 
 
}

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css"> 
 
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css"> 
 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.web.min.js"></script> 
 

 
<script id="Template4" type="text/x-kendo-template"> 
 
    <div class="col-md-6" data-maxpanel="4">#= Name #</div> 
 
</script> 
 

 
<div class="page-detail container-fluid" id="canvas"> 
 
    <div class="row" data-bind="source: javascriptData" data-template="Template4"> 
 
    </div> 
 
</div>

Answer 2

кажется, что лучший способ добиться того, что я хочу, это следующее:

var javascriptData = [{ Name: "First" }, { Name: "Second" }, { Name: "Third" }]; 

var jsList = []; 
jsList.push(javascriptData); 

var Model = kendo.observable({ 
    javascriptData: jsList 
}); 

По существу я добавляю свой массив к внешнему массиву только с одним элементом