事件处理程序被忽略。骨干

Question

我的项目中定义了视图：

define(['jquery', 'underscore', 'backbone', 'eventbus', 'text!templates/traveller.html'], function($, _, Backbone, bus, html) {
var TravellerView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this);
        this.render();
    },
    template: _.template(html),
    render: function() {
        // code omitted..
        this.$el.html(this.template({
            slices: datesSliced, 
            segmentName: this.options.segmentName,
            currentDate: this.options.currentDate
        }));
        console.log('rendered at: ' + new Date().toString());
        return this;
    },
    events: {
        'click a.handle-prev': 'showPrevious',
        'click a.handle-next': 'showNext'
    },
    showNext: function(e) {
        e.preventDefault();

        console.log('nothing happens');
    }
...

Render()只被调用一次 - 至少在Chrome控制台中只有一条消息。

相应的模板如下所示：

<ul><!-- things are omitted.. --></ul>
<a href="#" class="handle-prev"><i class="icon-chevron-left icon-3x"></i></a>
<a href="#" class="handle-next"><i class="icon-chevron-right icon-3x"></i></a>

问题是既不点击<a class="handle-next">也不触发事件（$('a.handle-next').trigger('click')）都会手动触发showNext处理程序。

我使用return false，stopPropagation()，preventDefault()，stopImmediatePropagation()，甚至将javascript:void(0)设置为 href 价值。

我如何诊断出错了什么？就像事件处理程序完全被忽略或分离一样。

修改。事件哈希

我在

的帮助下检查了视图的事件哈希

showEventsHash: function() {
    console.log(_.result(this, 'events'));
}

它不是空的：在Chrome控制台中可以看到

Answer 1

在我的路由器上，我发现了以下几行：

var $content = $('#content-region');

var traveller = new TravellerView({
    // options
});

var $wrapper = $('<div></div>', { 'class': 'row-fluid' });
$wrapper.append(traveller.el);
$content.append($wrapper[0].outerHTML);

我更改了模板标记以避免这种包装：

<div class="row-fluid">
    <ul><!-- items --></ul>
    <a href="#" class="handle-prev"><!-- i tag --></a>
    <a href="#" class="handle-next"><!-- i tag --></a>
</div>

它有效。

然后我找到了类似的作品：

var $row = $('<div />', {'class': 'row-fluid'});
for(var i = startPos; i < endPos; i++) {
    $row.append(new PhotoCardView({
        model: this.collection.models[i]
    }).el);
}

this.$el.html($row[0].outerHTML);
return this;

修改

现在我改用它：

this.$el.append('<div class="row-fluid"></div>');

for(var i = startPos; i < endPos; i++) {
    this.$el.find('.row-fluid').append(new PhotoCardView({
        model: this.collection.models[i]
    }).el);
}

在最后一种情况下，可以看到el个对象被附加到动态创建的$row元素。但是当您致电outerHTML时，基于el的事件会被剥离。