Question

我使用以下代码将一组对象绑定到Kendo模板：

<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>

问题是我得到了行类div的3个实例，而我的循环只有一个项目。我可以理解，这是为我的数组的每个元素渲染模板。我想要实现的是，只渲染模板的一个实例，并且我可以遍历模板内的每个记录。我从Handlebars迁移，行为略有不同，我的循环成功。

我知道我可以用一条记录创建一个外部数组然后它会工作但是想知道是否有更好的方法。

e.g。

 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 as：

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

即。您将div（行）的外Template4移动到HTML中。因此canvas绑定到Model，但row绑定到Model的数组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
 });

基本上我将我的数组添加到只有一个元素的外部数组

迭代KendoUI模板中的数组

2 个答案: