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方法来切换一个views元素并管理事件委托。

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

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

setElementview.setElement（element）

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

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

<强>优点：

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

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

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

Backbone刷新视图事件

2 个答案: