Кендо UI для цикла связывание данных

Question

У меня есть такой код в моем проекте:

<script id="menuTemplate" type="text/x-kendo-template"> 
    # for(var i=0; i < menus.menu.length; i++){ # 
    <li id="menu-#= i#" data-bind="events: {click: menuClick}" class="menu-item"> 
     <div>#= menus.menu[i].name #</div> 
    </li> 
    # } # 
</script> 
<div data-role="view" id="menuPage" data-model="menuViewModel"> 
    <ul id="menuListView" data-role="listview" data-template="menuTemplate" data-bind="source: dataSource"></ul> 
</div> 

<script> 
    $(document).ready(function(){ 
    var dataSource = new kendo.data.DataSource({ 
    transport: { 
     read: { 
      url: "data/test.json", 
      dataType: "json", 
     }, 
    }, 
    schema: { 
     data: function(data) { 
      return data; 
     } 
    }, 
}); 

var menuViewModel = kendo.observable({ 
    dataSource: dataSource, 
    menuClick: function(e) { 
     alert(e); 
    } 
}); 
kendo.bind($(document.body), menuViewModel); 
}); 
</script> 

Так что у меня ListView товаров, и я хочу связать клики на них. Проблема заключается в том, что щелчок привязывается только к первому элементу списка, поэтому предупреждение срабатывает только тогда, когда я нажимаю на элемент с идентификатором «menu-0». Что я пишу неправильно и как правильно привязать обработчик, так что функция menuClick будет обработчиком всех элементов списка?

Заранее благодарен!

Answer 1

список Обертывание элементов в DIV решает проблему:

<script id="menuTemplate" type="text/x-kendo-template"> 
<div> 
    # for(var i=0; i < menus.menu.length; i++){ # 
    <li id="menu-#= i#" data-bind="events: {click: menuClick}" class="menu-item"> 
     <div>#= menus.menu[i].name #</div> 
    </li> 
    # } # 
</div> 
</script>