Question

我看到itemview上的每一行都会多次触发click事件

 return Marionette.ItemView.extend( {
     template: ItemViewTemplate,
     tagName: 'tr',
     className: 'ItemRow',

     templateHelpers: viewHelpers,

     events: {
        'click .editRowItem': 'editRowItem'

多次触发editRowItem（）函数。触发该特定行上的点击的正确方法是什么？

谢谢！

Answer 1

通常它不应该多次触发。然而，它可能会发生，例如：

视图中具有相同类的嵌套元素。事件冒泡将导致触发多个事件。
父视图侦听某些或所有子视图中存在的类的单击事件。

一个例子（剥离的非相关部分）：

<script type="text/template" id="movie-list-item">
    <button type="button" class="btn btn-success some-button">
        <span class="some-button">Click here</span>
    </button>
</script>

// Itemview
var movieItemView = Marionette.ItemView.extend({
    template: "#movie-list-item",
    ui: {
        viewButton: '.some-button'
    },
    events: {
        'click @ui.viewButton': 'clickHandler'
    },
    clickHandler: function(ev) {
        // Log the click
        console.log('There was a click in an itemView!');

        // Uncomment the following to prevent multiple events:
        //ev.stopPropagation();
    }
});

// Composite view
var movieCompView = Marionette.CompositeView.extend({
    template: "#movie-list",
    itemView: movieItemView,
    ui: {
        viewButton: '.some-button'
    },
    events: {
        'click @ui.viewButton': 'clickHandler'
    },
    clickHandler: function(ev) {
        // Log the click
        console.log('There was a click in a collectionView!');

        // Uncomment the following to prevent multiple events:
        //ev.stopPropagation();
    }
});

在这里演示：http://jsfiddle.net/Cardiff/7d3fC/2/

请注意以下事项，如果我们在这种情况下不使用ev.stopPropagation()来阻止事件冒泡，控制台将记录4个条目;对于itemView是两个，对于collectionView是两个。为了防止这种行为（在这种情况下你不应该在collectionView中使用click事件）并因此接收一个而不是两个事件，我们使用ev.stopPropagation()。

另请注意，使用视图的ui属性来描述组件被视为良好做法，可以让您的生活更轻松。

Answer 2

如果要将click事件应用于模板中的每个行项，请尝试按照以下操作：

events: {
  'click' : 'editRowItem'
}

Marionette项目视图点击被多次触发

2 个答案: