查看未触发的事件-主干

View events not firing - backbone

本文关键字:事件 主干      更新时间:2023-09-26

我现在正在构建一个视图,当我单击.organisation链接时,我想激发我的编辑事件,但在单击此元素时,没有激发任何内容,我不明白为什么。

这是构建我的视图的代码,

App.Views.groupsView = Backbone.View.extend({
el: '.app',
template: _.template( $('#tpl-groups-base').html() ),
events: {
},
initialize: function(options) {
    this.render();
},
render: function() {
    this.$el.html( this.template() );
    var orgTab = new App.Views.OrganisationsTab({
        collection : new App.Collections.Organisations
    });
},

});

App.Views.OrganisationsTab = Backbone.View.extend({
el : '#organisations',
initialize: function() {
    App.Collections.OrganisationCollection = this.collection;
    this.collection.fetch();
    this.collection.on('sync', this.render, this);
},
render: function() {
    this.addAll();
    return this;
},
addAll: function() {
    App.Collections.OrganisationCollection.each(this.addOne, this);
},
addOne: function(organisation) {
    var view = new App.Views.OrganisationView({
        model : organisation
    });
    this.$el.append( view.render().el );
}

});

App.Views.OrganisationView = Backbone.View.extend({
    tagName: 'a',
    className:'group group--panel col-sm-3 organisation',
    template : _.template( $('#tpl-single-group').html() ),
    events: {
        "click body" : "edit",
    },
    initialize: function() {
        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.model, 'destory', this.remove);
    },
    render: function() {
        this.$el.html( this.template({
            group: this.model.toJSON()
        }));
        return this;
    },
    edit: function(e) {
        e.preventDefault();
        console.log(this.model);
    }
});

为什么我不能点击在最终视图中创建的组织a,并触发我的编辑功能?

如果您想将点击事件监听器附加到视图el 的子元素

events: {
    "click .organisation" : "edit",
},

如果你想把它连接到el 上

events: {
        "click" : "edit",
 },