백본 하위 뷰 이벤트

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

상위 뷰 요소를 하위보기로 전달해보십시오. 이것의 HTML을 대체이

 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() 
     }) 

에 그리고 당신의 하위 뷰에서 변경합니다. $ 엘은 렌더링 된 템플릿의 내용.

Answer 2

문제 # 1

고유해야하는 ID의 필요.

대신 클래스를 사용하십시오. 마크 업 및 이벤트 바인딩에서 #close를 .close로 변경하십시오.

이슈 # 당신은 당신의 렌더링에 엘 $ 견해를 설정하지 않는 2

. 백본보기는 모든 내부 선택기 작업을 자체 엘레멘트에 위임합니다. 백본 소스

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

에서

당신은 렌더링 호출 할 필요가 있으며 이벤트 바인딩을 사용하기 위해서는 엘을 설정해야합니다.

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