Javascript 忽略事件处理程序。脊梁骨

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

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>

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

---

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

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

html是您的模板标记吗？我不理解您@kinakuta。您正在将我仅假设的需求依赖项“html”传递到您的模板调用中。因为我看不到html是在哪里定义的，所以我只是想问一下html是否是可能已被Elsehare选中的模板标记。你可以向右滚动一点，这只是文本的requirejs别名！templates/traveler.html结果文本。为什么需要uu.bindAllthis；在初始化函数中？outerHTML是一个字符串，字符串没有事件绑定。@muistooshort$row对象有事件绑定吗？我想是的。保存事件绑定的最佳方式是什么？$row应该可以，因为底层DOM元素将具有事件绑定。但当它被导出并转换为字符串时，它就会崩溃。我很好奇这段代码的目的是什么，也许是某种廉价的肮脏克隆？没什么特别的。我只是想将子视图列表包装到网格行中。您不需要包装器，默认情况下，视图将创建一个作为其el，您通常可以将您的内容放入其中，然后调用方将$x.appendv.render.el用于某些x。如果您想要的不是el，则可以在视图上使用属性。

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);
}