子視圖的主幹事件不能正確啓動

Question

我有一個包含GalleryItem子視圖的主幹中的圖庫。

我現在遇到的問題是事件在子視圖上沒有正確觸發。

這裏是我的GalleryItemView代碼：

// Gallery View: Displays a Single Image Element 
var GalleryItemView = Backbone.View.extend({ 
    el: '#isotope', 

    events: { 
    "click .hoverbox": "onHoverBoxClick" 
    }, 


    initialize: function() { 
    this.template = Hogan.compile($("#gallery-item-template").html()); 
    }, 

    render: function() { 
    this.$el.append(this.template.render(this.model.toJSON())); 
    return this; 
    }, 
    onHoverBoxClick: function() { 
    console.log("clicked: ", this.model.id); 
    } 

}); 

我希望每個元素的.hoverbox DIV點擊時觸發的事件onHoverBoxClick。 但它什麼也沒做。 如果我添加此到視圖：

el: "#mydiv" 

則觸發事件，但對於每一個GalleryItemView。 （因此，對於8子視圖我拿到8個console.logs也只有我一個點擊）

我的子視圖模板看起來是這樣的：

<script type="text/x-handlebars-template" id="gallery-item-template"> 
    <div class="item {{tags}}" style="width: auto;"> 
    <img class="eveimage" src="{{image_medium_url}}"> 
    <div class="hoverbox down"><span>{{tags}}</span> </div> 
</div> 
</script> 

而且畫廊的集合視圖看起來是這樣的（這是哪裏我實例化畫廊項目）：

// Gallery View: Displays the main image/project gallery 
window.views.GalleryView = Backbone.View.extend({ 
    el: '#isotope_container', 
    className: 'no-transition', 
    template: _.template($("#gallery-template").html()), 

    initialize: function() { 
    this.collection = new gallery(); 
    this.$el.append(this.template); 
    this.collection.on('reset', this.render, this); 
    }, 

    render: function(){ 
    console.log("ich render nei"); 
    this.collection.forEach(this.addOne, this); 

    }, 
    addOne: function(model){ 
    var itemView = new GalleryItemView({model: model}); 
    var el = itemView.render().el; 

    this.$el.append(el); 
    } 
}); 

任何想法，爲什麼這是??謝謝...

Answer 1

當您在Backbone視圖上指定events散列時，Backbone使用jQuery .delegate方法將回調與視圖的el作爲根元素進行綁定。但是，在您的GalleryItemView.render方法中，實際上並不是呈現給視圖的el;你正在選擇一個完全不同的元素。正因爲如此，事件實際上是在你的事件散列的範圍之外發射。

相反，你需要做這樣的事情

window.views.GalleryItemView = Backbone.View.extend({ 
    ... 
    render:function() { 
    this.$el.append(this.template.render(this.model.toJSON())); 
    return this; 
    }, 
    ... 
}); 

看你當前的代碼，你就定義圖庫視圖渲染方法只是追加了一堆空<div>標籤。事實上，您選擇頁面上的現有元素並在GalleryViewItem.render方法中附加插入的模板是實際上導致您的項目出現的原因。

[[PART 2]] 使用您的編輯視圖，您在GalleryItemView上提供了一個ID選擇器作爲el屬性。因此，再加上使用.append()呈現每個項目視圖的方式，您仍將每個GalleryItemView實例附加到相同的元素。由於它們都共享相同的根元素，因此當事件被委派時，一個事件會導致調用每個GalleryItemView的處理程序。

你應該有什麼類似如下：

GalleryItemView = Backbone.View.extend({ 
    // remove the ID selector for the el property -- don't need it 
    ... 
    render:function() { 
    this.$el.html(this.template.render(this.model.toJSON())); 
    return this; 
    } 
    ... 
}); 

window.views.GalleryView = Backbone.View.extend({ 
    ... 
    addOne: function(model){ 
    var itemView = new GalleryItemView({model: model}); 
    var el = itemView.render().el; 

    // assuming you actually intended to attach all 
    // GalleryItemViews to the #isotope element 
    this.$('#isotope').append(el); 
    } 
    ... 
});