将对象数组绑定到kendo listview

时间:2017-12-12 09:22:43

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

我有一个案例,我的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循环将再次遍历所有项目并显示所有项目。

在这种情况下,任何人都可以帮助我

1 个答案:

答案 0 :(得分:0)

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

如果数据源提供的任何内容缺少Namedataitems属性,则javascript控制台将记录'<property>' is not defined.消息,并且不会显示列表视图。