Question

如何使用列表视图组件配置点击事件？调试脚本不在addToCart（）

内的断点处停止

ListView的定义：

$("#main").kendoListView({
    dataSource: items,
    template: kendo.template($("#item").html()),
    addToCart: function(e) {
        cart.add(e.data);
    }
});

模板：

<script type="text/x-kendo-template" id="item">
    <li class="products">
        <strong>#: ProductName #</strong>
        <button class="add-to-cart" data-bind="click: addToCart">Add to cart</button>
    </li>
</script>

编辑：如果将listView内联构造为kendo.observable：

，则可以使用它

var indexModel = kendo.observable({
    items: items,
    cart: cart,
    addToCart: function(e) {
        cart.add(e.data);
    }
});

kendo.bind($("#content"), indexModel);

<section id="content">
    <ul data-role="listview" data-bind="source: items" data-template="item" id="main"></ul>
</section>

<script type="text/x-kendo-template" id="item">
    <li class="products">
        <button class="add-to-cart" data-bind="click: addToCart">Add to cart</button>
    </li>
</script>

Answer 1

据我所知，如果你不使用kendo observable，它不是一个合适的绑定。例如，您无法在模板中使用<strong data-bind="text: ProductName"></strong>"，也无法将事件绑定到按钮。

要使其工作，您可以向按钮添加jQuery事件处理程序，并从列表视图中检索数据项（请注意，列表视图配置中不再定义addToCart）：

function addToCart(e) {
    var li = $(e.currentTarget).parent(), 
        listView = $("#main").data().kendoListView, 
        dataItem = listView.dataItem(li);

    console.log(dataItem);
}

$('#main').on('click', '.add-to-cart', addToCart);

我创建了一个jsFiddle来演示。

单击Kendo ListView模板中的事件

1 个答案: