2011-08-31 102 views
10

在我看来,我不声明this.el因为我dinamically创建它,但在这样的事件不火。骨干刷新视图事件

这是代码:

视图1:

App.Views_1 = Backbone.View.extend({ 

    el:    '#content', 

    initialize:  function() {  
         _.bindAll(this, 'render', 'renderSingle');       
        }, 

    render:   function() {  
         this.model.each(this.renderSingle);     
        }, 

    renderSingle: function(model) { 

         this.tmpView = new App.Views_2({model: model});      
         $(this.el).append(this.tmpView.render().el); 

        } 
}); 

查看2:

App.Views_2 = Backbone.View.extend({ 

    initialize:  function() {         
         _.bindAll(this, 'render');      
        }, 

    render:   function() {  
         this.el = $('#template').tmpl(this.model.attributes);  // jQuery template       
         return this;        
        }, 

    events:   {  
         'click .button' :  'test'     
        }, 

    test:   function() {   
         alert('Fire'); 
        } 

    }); 

}); 

当我点击 “.button” 什么也没有发生。 谢谢;

+0

假设#模板包含一个带'.button'类的按钮,这应该起作用。你能发布你的#模板的内容吗? –

回答

20

在渲染()方法的末尾,你可以告诉骨干使用delegateEvents()重新绑定事件。如果你没有传入任何参数,它将使用你的事件散列。

render:   function() {  
        this.el = $('#template').tmpl(this.model.attributes);  // jQuery template       
        this.delegateEvents(); 
        return this;        
       } 
1

作为Backbone.js的v0.9.0的(2012年1月30日),有setElement方法切换的视图元件和管理事件代理。

render: function() { 
    this.setElement($('#template').tmpl(this.model.attributes)); 
    return this; 
} 

Backbone.View setElementhttp://backbonejs.org/#View-setElement

setElementview.setElement(元素)

如果你想用骨干视图适用于不同的DOM元素,使用 setElement,这将还创建缓存$ EL参考和移动 视图的委托从旧元素事件到新的。



以这种方式动态创建你的看法有它的优点和缺点,但:

优点:

  • 所有应用程序的HTML标记将产生在模板中,因为Views根元素全部由渲染返回的标记替换。这实际上是一种很好的...不再寻找JS内部的HTML。
  • 关注尼斯分离。模板生成100%的HTML标记。视图仅显示该标记的状态并响应各种事件。
  • 具有呈现负责创建整个视图(包括它的根元素)是在与该ReactJS呈现部件的方式线,所以这可能是在从Backbone.Views迁移到ReactJS部件的过程的有益的步骤。

缺点: - 这些大多是可以忽略不计

  • 这不会是一个痛苦的过渡,使在现有的代码库。意见将需要更新和所有模板都需要具有包括在标记中的视图的根元素。
    • 多个视图使用的模板可能会变得毛茸茸 - 所有用例中的根元素是否相同?
  • 在渲染被调用之前,视图的根元素是无用的。对它的任何修改都将被丢弃。
    • 这将包括父视图在渲染之前设置子视图元素上的类/数据。 这样做也是不好的做法,但它发生 - 一旦渲染覆盖元素,这些修改将会丢失。
  • 除非你重写Backbone.View构造,每个视图将不必要的委托它的事件,并设置属性到被渲染期间更换根元素。
  • 如果其中一个模板解析为元素列表,而不是包含子元素的单个父元素,则为you're going have a bad timesetElement将抓取该列表中的第一个元素,并丢弃其余的元素。
    • 下面是问题的一个例子,虽然:http://jsfiddle.net/CoryDanielson/Lj3r85ew/
    • 这个问题可以通过一个分析模板,并确保他们解析到一个单一的元素构建的任务减轻,或通过重写setElement并确保进入element.length === 1