listview - 用于循环数据绑定(bind)的 Kendo 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 项目，我想绑定(bind)点击它们。问题是 click 仅绑定(bind)到 ListView 的第一个元素，因此仅当我单击具有“menu-0”id 的元素时才会触发警报。我写错了什么以及如何正确绑定(bind)处理程序以便 menuClick 函数将成为所有 ListView 项的处理程序？

提前致谢!

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>