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项目，我希望对它们进行绑定点击。问题是click只绑定到listview的第一个元素，因此只有当我点击带有“menu-0”id的元素时才会触发警报。我写的错误以及如何正确绑定处理程序，因此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>

用于循环数据绑定的Kendo UI

1 个答案: