骨干观看事件不烧，EL存在

Question

我已经经历了类似的讨论，仍然不知道为什么我的事件没有被解雇。我似乎缺乏对骨干事件如何工作的基本理解。

这里是我的代码：

(function() { 

    MP.IndicatorView = Backbone.View.extend({ 
    template: JST['backbone/templates/indicator'], 
    className: 'row indicator', 

    initialize: function() { 
     console.log(this); 
     console.log(this.el); 
     _.bindAll(this, 'collapse'); 
    }, 

    events: { 
     "click .control" : "collapse" 
    }, 

    collapse: function (e) { 
     console.log('shit'); 
     var $el = $(e.target); 

     $el.toggleClass('expand'); 

     var $panelToPoke = $el. 
     parents('.top-container'). 
     siblings('.bottom-container') 
     , $parentPanel = $panelToPoke.parents('.indicator') 
     , isVisible = $panelToPoke.is(':visible'); 

     $parentPanel.toggleClass('expanded'); 

     isVisible ? $panelToPoke.slideUp() : $panelToPoke.slideDown(); 
    }, 

    render: function() { 
     // Don't show offers that have no transactions 
     if (this.model.get('transactionCount') > 0) { 
     this.$el.html(this.template(this.model.for_template())); 
     } 
     return this.$el; 
    } 
    }); 

    MP.IndicatorsView = Backbone.View.extend({ 
    el: '#indicators', 

    render: function() { 
     var view; 
     var subViews = this.collection.reduce(function (memo, indicator) { 
     view = new MP.IndicatorView({ model: indicator }); 
     memo += view.render().html(); 
     return memo 
     }, ''); 

     this.$el.html(subViews); 
     return this; 
    } 
    }); 
})(); 

如何看待被实例化：

var indicators = new MP.Indicators(coordinator.dump()); 
var indicatorsView = new MP.IndicatorsView({ collection: indicators }); 
indicatorsView.render(); 

模板：

浏览：

<div class="row indicator"> 

    <div class='top-container'> 
    <ul class="inline-list mainpanel"> 
     <li> 
     <div class='control expand'></div></li> 
     <li class="state <%= is_active ? 'active' : 'expired' %>"></li> 

Answer 1

这里是一个可行的解决方案http://jsfiddle.net/hcKv2/ 主要问题是您在indicatorsView.render()方法中使用.html()而不是主干视图元素.$el。

您需要在render方法内部返回this才能实现链模式，但是如果您在子视图中返回$el，则不一定需要。

render: function() { 
    var view; 
    var subViews = this.collection.reduce(function (memo, indicator) { 
    view = new MP.IndicatorView({ model: indicator }); 
    //memo += view.render().html(); 
    this.$el.append(view.render()); 
    // or this.$el.append(view.render().$el); 
    // if you return this inside render method 
    return memo 
    }, ''); 

    //this.$el.html(subViews); 
    return this; 
} 

有一个很好的编码。

Answer 2

一些参考furthur解释：

http://ianstormtaylor.com/rendering-views-in-backbonejs-isnt-always-simple/