骨幹子視圖事件

Question

我有一個網站與骨幹開發。我創建了一個應用程序，並在其中創建了一些子視圖。

在此子視圖我可以有一個div（id爲close），如果我點擊它，我要觸發一個事件。但事件並不火，我不知道爲什麼。你能向我解釋我對這件事有什麼不妥嗎？

的問題是在Search.Views.Product，與事件的子視圖。

這是我的應用程序（我已經削減一些閱讀以及應用程序）：

//main app 
Search.Views.App = Backbone.View.extend({ 
    initialize:function() { 
     var this_app = this; 
     this.subView = { 
      Product : new Search.Views.Product({ 
       base_url:this_app.base_url || '', 
       collection : new Search.Collections.Products() 
      }) 
     } 
    }, 
    render:function (options) { 
     var defaults = { 
      products:{ 
       wrap:"ul", 
       id:"product-results", 
       class:"" 
      } 
     } 
     var settings = $.extend(true, defaults, options); 
     this.renderProducts(settings); 
    }, 
    renderProducts:function (settings) { 
      $(this.id).html(this.wrap(this.subView.Product.getTemplate(settings.products.view), settings.products)); 
    } 
}); 

//collection 
Search.Collections.Products = Backbone.Collection.extend({ 
    model: Search.Models.Product, 
    initialize:function() { 

    } 
}); 

Search.Models.Product = Backbone.Model.extend({ 
    defaults: search.product.defaults || {}, 
    initialize:function() { 

    } 
}); 

Search.Views.Product = Backbone.View.extend({ 
    //doesn't fire this event!!!-------------------------------------- 
    events: { 
     'click #close': 'closeResults', 
     'click': 'closeResults' 
    }, 
    closeResults:function (event) { 
     console.log('Close results'); 
     $('#close').html('test'); 
    }, 

    getTemplate:function (view) { 
     var data = this.collection.toJSON() || this.model.toJSON(); 

     data = this.normalize(data); 
     var template = Handlebars.compile($(this.template).html()); 
     return template({view:view, results:data}); 
    }, 
    render:function() { 
     // non utilizzato per ora 
     return this; 
    } 
}); 

Answer 1

嘗試將父視圖元素傳遞給子視圖。改變這種

 Product : new Search.Views.Product({ 
      base_url:this_app.base_url || '', 
      collection : new Search.Collections.Products() 
     }) 

到

 Product : new Search.Views.Product({ 
      el: this.$('.some-selector'), 
      base_url:this_app.base_url || '', 
      collection : new Search.Collections.Products() 
     }) 

而在你的子視圖替換這個HTML。$ EL與呈現模板的內容。

Answer 2

問題＃1

的ID必須是唯一的。

改爲使用類。將標記和事件綁定中的#close更改爲.close。

問題2：

您沒有設置在渲染$ EL的意見。 Backbone視圖將其所有內部選擇器工作委託給它自己的el。

從骨幹網源

$: function(selector) { 
    return this.$el.find(selector); 
}, 

你需要調用渲染和需要設置的EL事件綁定工作。

this.$el.html(...);