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

Backbone nested view has events which are not triggering

本文关键字：事件 嵌套 视图      更新时间：2023-09-26

我有一个父视图它有一个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; 
});

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

为了避免作用域问题所有events委托都作用域到Backbone中的el 视图。

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

你在render中的健康检查应该看起来像这样，以模仿Backbone内部的工作方式:

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