javascript - 查看未触发的事件 - 主干

标签 javascript backbone.js backbone-views

我现在正在构建一个 View ,当我单击 .organization 链接时,我想触发我的编辑事件,但是单击此元素时,没有任何内容被触发,我无法理解为什么。

这是构建我的 View 的代码,

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);
    }

});

为什么我无法点击最终 View 中创建的组织 a 并触发我的编辑功能?

最佳答案

如果要将点击事件监听器附加到 View el 的子元素

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

如果你想把它附加到el上

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

关于javascript - 查看未触发的事件 - 主干,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26869785/

相关文章:

backbone.js - 主干 View 组织和部分

javascript - Javascript 中的重复函数

backbone.js - 如何配置 karma 以正确使用 'define'(with backbone.js)?

javascript - 通过 CollectionView (Marionette/Backbone) 传递布局(和操作区域)

jquery - 主干+ RequireJs-jQuery : Cannot read property 'normalize' of undefined

backbone.js - View 之间的事件处理

javascript - Babel v6 - 宽松模式下的transform-es2015-classes插件抛出SyntaxError : Unexpected identifier for async/await

javascript - 如何将单独的 JS 文件、CSS 文件和 HTML 文件合并在一起?

javascript - 在 Fabric.js 中剪切区域并设置 Canvas 背景

javascript - 在 Backbone.js 中,我如何从一个 View 中调用另一个 View 中的函数?