javascript - 主干嵌套视图具有未触发的事件

Question

好的，所以我有一个父视图，它有一个呈现子视图的单击事件。在这个子视图中是一个我试图验证然后提交的表单。所以我的父视图看起来像这样：

var MapView = Backbone.View.extend({
    el: '.body',
    template: _.template(MapTemplate),
    render: function() {
        ...
    },
    events: {
        'click #log-pane-title': 'loadLogView'
    },
    loadLogView: function() {
        var eventLogView = new EventLogView({
            id: properties._id
        });

        eventLogView.render();
    }
});

我的子视图看起来像这样：

var EventLogView = Backbone.View.extend({
    el: '#eventlog',
    logform: new NewLogForm({
                template: _.template(AddLogTemplate),
                model: new LogModel()
            }).render(),
    render: function() {
        // Render the form
        $("#addtolog").html(this.logform.el);
    },
    events: {
        'submit #addlogentry': 'test'
    },
    test: function() {
        alert('inside eventlogview');
        return false;
    }
});

我面临的问题是test()永远不会触发。出于调试目的，我确保提交事件甚至通过放置：

$('#addlogentry').on('submit', function() { 
    alert( "submit firing" ); 
    return false; 
});

在render()中EventLogView。这确实触发了，所以我不确定发生了什么以及为什么test()没有触发。

Answer 1

为避免范围问题，所有events委派的范围都限于elBackbone 中的视图。

所以你的#addlogentry按钮应该在你的EventLogView el.

你的健全性检查render应该看起来像这样，以模仿 Backbone 内部的工作方式：

this.$el.on('submit', '#addlogentry', function() { 
    alert( "submit firing" ); 
    return false; 
});