Привязка массива объектов к списку кендо

У меня есть случай, когда моя 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 снова пробежит все элементы и отобразит все элементы.

Может ли кто-нибудь помочь мне в этом случае


javascript kendo-ui kendo-datasource kendo-listview kendo-template
person Harsha pps    schedule 12.12.2017    source источник
comment
Array — это глобальный объект в Javascript. Если вы введете Array.length в инструментах разработчика Chrome, он вернет 1. Переименовать массив в незарезервированный идентификатор.   -  person Marco    schedule 12.12.2017
comment
Ваш первый фрагмент, это 3 отдельных объекта или один массив, содержащий 3 объекта? Является ли каждый из них источником данных для индивидуального экземпляра ListView или один экземпляр списка отображает все 3 из этих элементов с дочерним списком в нем, отображающим ваш массив dataitems?   -  person Marco    schedule 12.12.2017
comment
В противном случае рассмотрим только первый элемент с идентификатором 0. Когда мы добавляем этот объект в ViewModel, нам нужно найти шаблон для его поддержки.   -  person Harsha pps    schedule 12.12.2017
comment
Я бы настоятельно рекомендовал против вашего подхода. ListView не подходит для вложения, и вам нужно будет обернуть скрипты внутри вашего шаблона. Вы должны предварительно отфильтровать и сгладить свой источник данных и отобразить список для каждого элемента.   -  person Marco    schedule 12.12.2017

Ответы (1)


arrow_upward
0
arrow_downward

.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., и список не появится.

person Richard    schedule 13.12.2017