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

2023年3月9日 203次阅读

好的,所以我有一个父视图,它有一个呈现子视图的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()没有触发.

最佳答案 为了避免范围问题,所有事件委托都限定为Backbone中的视图el.

所以#addlogentry按钮应该存在于EventLogView el中.

并且您在渲染中的完整性检查应该类似于模仿Backbone如何在内部工作：

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