Question

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

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()的{{1}}。这确实会触发，所以我不确定发生了什么以及为什么EventLogView没有触发。

Answer 1

为避免确定范围问题，所有events委派都限定在Backbone中的观看次数el 。

因此，您的#addlogentry按钮应该位于EventLogView el内。

您在render中的理智检查看起来应该像这样模仿Backbone如何在内部工作：

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

Backbone嵌套视图具有不触发的事件

1 个答案: