Backbone刷新视图事件

Question

在我看来，我没有声明this.el，因为我以恐怖的方式创建它，但是这样事件就不会发生。

这是代码：

查看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”时没有任何反应。 谢谢;

Answer 1

在render（）方法结束时，您可以告诉骨干使用delegateEvents（）重新绑定事件。 如果您没有传入任何参数，它将使用您的事件哈希。

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

Answer 2

从Backbone.js v0。9。0（2012年1月30日）开始，有一个setElement方法来切换视图元素并管理事件委托。

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

Backbone.View setElement ： http ： //backbonejs.org/#View-setElement

setElementview.setElement（元件）

如果您想将Backbone视图应用于其他DOM元素，请使用setElement，它还将创建缓存的$ el引用，并将视图的委托事件从旧元素移动到新元素。

以这种方式动态创建视图有其优点和缺点：

优点：

• 所有应用程序的HTML标记都将在模板中生成，因为Views根元素全部由渲染返回的标记替换。 这实际上很好......不再需要在JS中查找HTML。
• 很好的分离关注点。 模板生成100％的HTML标记。 视图仅显示该标记的状态并响应各种事件。
• 渲染负责创建整个视图（包括它的根元素）与ReactJS渲染组件的方式一致，因此这可能是从Backbone.Views迁移到ReactJS组件的过程中的一个有益步骤。

缺点： - 这些几乎可以忽略不计

• 这不是在现有代码库上进行的无痛过渡。 需要更新视图，并且所有模板都需要在标记中包含View的根元素。
  • 多个视图使用的模板可能会有点毛茸茸 - 根元素在所有用例中都是相同的吗？
• 在调用render之前，视图的根元素是无用的。 对它的任何修改都将被丢弃。
  • 这将包括在渲染之前在子视图元素上设置类/数据的父视图。 这样做也是不好的做法 ，但它会发生 - 一旦渲染覆盖元素，这些修改就会丢失。
• 除非重写Backbone.View构造函数，否则每个视图都会不必要地委托它的事件并将属性设置为在渲染期间替换的根元素。
• 如果您的某个模板解析为元素列表而不是包含子元素的单个父元素， 那么您将遇到错误的时间 。 setElement将从该列表中获取第一个元素并丢弃其余元素。
  • 以下是该问题的一个例子： http ： //jsfiddle.net/CoryDanielson/Lj3r85ew/
  • 可以通过解析模板并确保它们解析为单个元素的构建任务，或通过重写setElement并确保传入的element.length === 1来缓解此问题。