javascript - 事件处理程序被忽略。 Backbone

Question

我的项目中定义了一个 View :

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 值。

如何诊断问题所在？就像事件处理程序被完全忽略或分离一样。

编辑。事件哈希

我在

的帮助下检查了 View 的事件哈希

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 的事件将被删除。