将对象数组绑定到剑道列表视图答案

【问题标题】：Binding Array of Objects to kendo listview将对象数组绑定到剑道列表视图
【发布时间】：2017-12-12 09:22:42
【问题描述】：

我的 ViewModel 有一个数组，例如，

{id: 0,
 Name: "KendoListView1",
 dataitems: [{id: 1, itemName: "Kendo"}, {id: 2, itemName: "List"}]
},

{id: 2,
 Name: "KendoListView2",
 dataitems: [{id: 3, itemName: "Kendo"}, {id: 4, itemName: "List"}]
}, 

{id: 3,
 Name: "KendoListView3",
 dataitems: []
}

所以现在当我将我的 ViewModel 绑定到 ListView 模板时，我的模板需要处理以下情况：如果有一个数组，我会在视图中显示数组元素，而当数组为空时，我只需要显示名称 (KendoListView1, KendoListView2) 而不是数组元素

我需要这样的模板结构：

<script id="template" type="text/kendo-ui-template">  
# if(dataitems.length) { #
    <div>
         //Show all the items Names from the Array
    </div>
# } else {#
    <div>
         //Show all the Names
    </div>
# } #
</script>

我尝试使用 for 循环遍历数组并在我有数组时显示项目，但在运行时，一旦我将新项目添加到数组中，for 循环将再次运行所有项目并显示所有项目。

在这种情况下谁能帮助我

【问题讨论】：

Array 是 Javascript 中的全局对象。如果你在 Chrome 开发工具中输入Array.length，它会返回 1. Rename Array to a non-reserved identifier
你的第一个 sn-p，是 3 个不同的对象还是一个包含 3 个对象的数组？这些中的每一个都是定制 ListView 实例的数据源，还是一个 listview 实例呈现所有 3 个项目，其中包含子 listview 呈现您的 dataitems 数组？
否则只考虑第一项，id为0。当我们将此对象添加到ViewModel时，我们需要找到一个模板来支持它
我强烈反对你的做法。 ListView 不适合嵌套，您需要在模板中包装脚本。您应该预先过滤和展平您的数据源，并为每个项目显示一个列表视图。

标签： javascript kendo-ui kendo-datasource kendo-template kendo-listview

【解决方案1】：

.Map().Join() 可用于渲染有时填充的dataitems。

模板

  <script id="my_funky_listview_template" type="text/x-kendo-template">
    <div>
    # if (dataitems.length) { #
      #:
        itemName + " items: " + dataitems.map(function(item){return item.itemName;}).join(",")
      #
    # } else { #
      #:
        Name
      #
    # } #
    </div>
  </script>

声明/配置

<script>
$(function() {
  $("#listview").kendoListView({
    dataSource: dataSource,
    template: kendo.template($("#my_funky_listview_template").html())
  });     
});
</script>

如果数据源提供的任何内容缺少Name 或dataitems 属性，javascript 控制台将记录'<property>' is not defined. 消息并且不会出现列表视图。

【讨论】：