backbone.js事件和el [英] backbone.js events and el

问题描述

好吧，我已经阅读了有关Backbone视图和事件没有被触发的其他几个问题，但是我仍然没有感到悲伤。我一直在干扰骨干大约一天，所以我确定我错过了一些基本的东西。以下是我正在使用的jsfiddle：
http://jsfiddle.net/ siyegen / e7sNN / 3 /

 （function（$）{
 
 var GridView = Backbone.View.extend（{
 tagName：'div'，
 className：'grid-view'，
 initialize：function（）{
 _.bindAll（this， 'render'，'okay'）; 
}，
事件：{
'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（）; 
 }，
事件：{
'点击按钮＃buildGrid'：'buildGrid'
}，
 render：function（）{
 $（this.el）附加（$（ '< 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上的事件：

 事件：{
'click .grid-view' ：'好'
} 
  

说：

当您点击与匹配的后裔时，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> 。如果您将事件更改为：

 事件：{
'click'：'okay'
} 
  

你会听到你的奶牛或者在阅读警报之后听到他们，这取决于这个问题使你如何疯狂）。

修正的小提琴： http://jsfiddle.net/ambiguous/5dhDW/

Okay, so I've read several other questions regarding Backbone views and events not being fired, however I'm still not getting it sadly. I been messing with Backbone for about a day, so I'm sure I'm missing something basic. Here's a jsfiddle with what I'm working with: 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);

The okay event on the GridView does not fire, I'm assuming because div.grid-view does not exist when the event is first bound. How should I handle the binding and firing of an event that's built on a view dynamically? (Also, it's a short example, but feel free to yell at me if I'm doing anything else that I shouldn't)

解决方案

Your problem is that the events on GridView:

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

say:

when you click on a descendent that matches '.grid-view', call okay

The events are bound with this snippet from backbone.js:

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

So the .grid-view element has to be contained within your GridView's this.el and your this.el is <div class="grid-view">. If you change your events to this:

events: {
    'click': 'okay'
}

you'll hear your cows (or "hear them in your mind" after reading the alert depending on how crazy this problem has made you).

Fixed fiddle: http://jsfiddle.net/ambiguous/5dhDW/

这篇关于backbone.js事件和el的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！