Howto綁定Backbone子視圖中的單擊事件

Question

我在理解Backbone子視圖中的事件綁定時遇到問題。我的視圖被定義爲如下：

TenantView = Backbone.View.extend({ 
    events: { 
    "click": "setActive" 
    }, 
    initialize: function() { 
    this.parentEl = this.options.parentEl; 
    return this.render(); 
    }, 
    template: new EJS({ 
    url: '/scripts/templates/tenant.ejs' 
    }), 
    render: function() { 
    $(this.parentEl).children('ul').append(this.template.render(this.model)); 
    return this; 
    }, 
    setActive: function(event) { 
    return this.model.set('active', true); 
    } 
}); 

該模板簡單地由一個li的方含一個a。完成這種方式，點擊我的視圖上的事件沒有捕捉到，我的方法setActive永遠不會被觸發。

當我通過el屬性（如el: 'li'）擴展我的視圖時，我的（2）個視圖中的一個視圖正常工作並觸發setActive函數。第二種觀點根本沒有反應。如果我在視圖初始化期間忽略el屬性，工作視圖的el屬性指向li，失敗視圖el指向可在頁面中找到的第一個li。

可以看出，當涉及到el屬性的含義時，我完全失去了。

問題是，我怎麼能綁定一個點擊視圖到這個視圖setActive函數？

任何人都可以啓發我嗎？

問候 菲利克斯

Answer 1

第一件事情，你可以閱讀documentation和this。在那裏給出有關el的說明。

由於TenantView有parentEl屬性，我假設它是從一些parent_view呈現。我會建議像下面的一些方法，並試一試。

var ChildView = Backbone.View.extend({ 
    tagName : "li", // change it according to your needs 

    events : { 
    "click": "setActive" 
    }, 

    initialize : function() { 
    _.bindAll(this, "setActive"); 
    // code to initialize child_view 
    }, 

    render : function() { 
    // as I'm not familiar with the way you are using template, 
    // I've put simple call to render template, but it should render the 
    // content to be kept inside "li" tag 
    this.$el.html(this.template()); 

    return this; 
    }, 

    setActive : function(event) { 
    // code to be executed in event callback 
    } 
}); 


var ParentView = Backbone.View.extend({ 
    el : "#parent_view_el", 

    initialize : function() { 
    // parent view initialization code 
    }, 

    render : function() { 
    // a place from where ChildView is initialized 
    // might be a loop through collection to initialize more than one child views 
    // passing individual model to the view 

    var child_view = new ChildView(); 

    this.$("ul").append(child_view.render().$el); // equivalent to this.$el.find("ul") 

    return this; 
    } 
}); 

希望它有幫助！

Answer 2

你有一種禁用骨幹通過引入您的parentEl財產和規避視圖元素的創建自然的行爲。你基本上從來沒有把elz屬性視爲任何東西。

如果我的代碼正確，TenantView是租戶列表中的單個列表項。

在你TenantView，你可以做這個建在事件槓桿骨幹：

render: function() { 
    this.setElement(this.template.render(this.model)); 
    $(this.parentEl).children('ul').append(this.$el); 
    return this; 
} 

的setElement功能將使用您的返回值template功能的電纜鋪設工作的意見元素，並且還設置了事件你。在文檔中，建議使用setElement而不是僅僅爲el屬性指定一些內容。還有一個漂亮的$el屬性，它將包含視圖元素的緩存jQuery（或Zepto）對象。

走得更在主幹路個人而言，我會考慮這樣的事情：

var TenantView = Backbone.View.extend({ 
    // ========= 
    // = Setup = 
    // ========= 

    events: { 
     "click": "setActive" 
    }, 

    template: new EJS({ 
     url: '/scripts/templates/tenant.ejs' 
    }), 

    // ============= 
    // = Lifecycle = 
    // ============= 

    initialize: function(model, options) { 
     this.render(); 
    }, 

    render: function() { 
     var content = this.template.render(this.model); 
     this.$el.html(content); 
     return this; 
    }, 

    // ========== 
    // = Events = 
    // ========== 

    setActive: function(event) { 
     return this.model.set('active', true); 
    } 

}); 


var TenantList = Backbone.View.extend({ 

    // ========= 
    // = Setup = 
    // ========= 

    id: "tenantList", 
    tagName: "ul", 

    // ============= 
    // = Lifecycle = 
    // ============= 

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

    render: function() { 
     if (this.collection.length > 0) { 
      this.renderChildren(); 
     } 
    }, 

    renderChildren: function() { 
     var that = this; 

     this.collection.each(function(tenant) { 
      that.$el.append(new TenantView(tenant).$el); 
     }); 
    } 
});