1

我的项目中定义了一个视图：

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 控制台中可以看到

在此处输入图像描述

4

1 回答 1

0

在我的路由器上，我发现了这些行：

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- 的事件时，它会被剥离。

于 2013-09-09T08:54:53.620 回答