backbone.js events and el

backbone.js events and el

本文关键字：el and events js backbone      更新时间：2023-09-26

好的，我已经读了几个关于主干视图和事件未被触发的其他问题，但遗憾的是我仍然没有得到它。我花了一天时间摆弄Backbone，所以我肯定遗漏了一些基本的东西。这是我正在研究的一个例子:http://jsfiddle.net/siyegen/e7sNN/3/

(function($) {
    var GridView = Backbone.View.extend({
        tagName: 'div',
        className: 'grid-view',
        initialize: function() {
            _.bindAll(this, 'render', 'okay');
        },
        events: {
            'click .grid-view': 'okay'
        },
        okay: function() {
            alert('moo');
        },
        render: function() {
            $(this.el).text('Some Cow');
            return this;
        }
    });
    var AppView = Backbone.View.extend({
        el: $('body'),
        initialize: function() {
            _.bindAll(this, 'render', 'buildGrid');
            this.render();
        },
        events: {
            'click button#buildGrid': 'buildGrid'
        },
        render: function() {
            $(this.el).append($('<div>').addClass('gridApp'));
            $(this.el).append('<button id="buildGrid">Build</button>');
        },
        buildGrid: function() {
            var gridView = new GridView();
            this.$('.gridApp').html(gridView.render().el);
        }
    });
    var appView = new AppView();
})(jQuery);

GridView上的okay事件不触发，我假设因为div.grid-view在事件第一次绑定时不存在。我应该如何处理绑定和触发的事件是建立在一个视图动态?(另外，这是一个简短的例子，但如果我做了任何我不应该做的事情，请随时对我大喊大叫)

你的问题是GridView上的事件:

events: {
    'click .grid-view': 'okay'
}

说:

当你点击与'.grid-view'匹配的后代时，调用okay

事件与backbone.js中的片段绑定:

if (selector === '') {
  this.$el.on(eventName, method);
} else {
  this.$el.on(eventName, selector, method);
}

所以.grid-view元素必须包含在GridView的this.el和this.el是<div class="grid-view">。如果您将events更改为:

events: {
    'click': 'okay'
}

你会听到你的牛的声音(或者在阅读警报后"在你脑海中听到它们"，这取决于这个问题让你有多疯狂)。

固定小提琴:http://jsfiddle.net/ambiguous/5dhDW/

相关文章：