在 KendoUI 模板中迭代数组答案

【问题标题】：Iterating an array inside a KendoUI Template在 KendoUI 模板中迭代数组
【发布时间】：2015-02-19 17:05:32
【问题描述】：

我已经使用以下代码将一组对象绑定到剑道模板：

<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 迁移，我的循环成功运行。

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

例如

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

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

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

【问题讨论】：

没有更好的方法（而且我一开始不明白这是一个坏方法）。您将 View 与 ViewModel (ObservableObject) 绑定，而不是 ViewModel 数组。

标签： jquery templates mvvm kendo-ui

【解决方案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>

即您将Template4（行）的外部div 移动到HTML 中。所以canvas 绑定到模型，但row 绑定到模型数组javascriptData。

在下面的sn-p中检查一下

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

【讨论】：

这并不能真正满足我的需要，我给出的示例被简化了，我需要将行元素保留在模板中。
你能提供更多细节吗？也许有更简单的方法。
我正在使用模板生成动态引导网格。网格可以是 1x1、4x4 或可以具有自定义布局（例如，第一行 2 个面板，第二行 5 个面板）。这就是为什么我需要访问模板内的数组。可能我用一个元素创建一个外部数组的方法是最好的方法。

【解决方案2】：

似乎实现我想要的最好方法如下：

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

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

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

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

【讨论】：