템플릿의 DOM 이벤트에 InnerView가 응답하지 않습니다.

Question

질문 : 다른보기의 범위 내에 백본보기를 만들면 내부보기가 해당 서식 파일에서 시작된 DOM 이벤트에 응답하지 않고 외부보기가 그 사건들. 아래 예제에서 innerview는 submit 버튼을 가지고 있지만 outerview만이 submitButton의 클릭에 응답합니다.

라우터의 각 경로에 대한 새로운 기본보기를 만드는 Backbone 프로젝트를 만들고 있습니다. 기본보기에는 페이지의 다른 부분에 대한 하위보기가있을 수 있습니다. 예를 들어, OrderView의 초기화 기능에서 OrderView 페이지

routes: { 

      'order': 'orderProduct' 
     }, 

orderProduct: function(){ 

      this.loadView(new OrderView()); 

     }, 

를 만드는 order 경로있다, 나는, 예를 들어, formView을 OrderView에 대한 파단을 만들 수 있습니다.

var OrderView = Backbone.View.extend({ 


     initialize: function(){ 
      $("body").html(this.el); 
      this.template = _.template($('#order-template').html()), 

      this.subViews = []; 
      var formView = new FormView(); 
      this.subViews.push(formView); 
      this.render(); 
     }, 

그런 다음 FormView에, 나는 그런 submitButton

var FormView = Backbone.View.extend({ 
     el: '#forForm', 

     initialize: function(){ 
      this.template = _.template($('#form-template').html()); 
     }, 
     events: { 
      'click #submitButton' : 'submitForm', 
      }, 

     submitForm: function(){ 
      ... 
     }, 

     render: function(){ 

      $('#forForm').append(this.template()); 
      return this; 

     } 
    }); 

양식이 페이지로 렌더링 한, 명백한 만들 수 있지만 내가 클릭 할 때 아무 일도 발생하지 제출합니다. 그런 다음 이벤트 처리기 및 해당 함수 'click #submitButton' : 'submitForm',을 OrderView에 추가하고 제출 이벤트에 응답했습니다. 그래서 내 질문은, 내가 왜 OrderView의 범위 내에서 FormView를 만들 때, FormView는 템플릿의 범위 안에 이벤트에 응답 할 수 없다는 것입니다?

FormTemplate

<script type="text/template" id="form-template"> 
    <button id="submitButton">submit</button> 
    </script> 

업데이트 :

I주의한다 (내주 뷰 렌더링) 폼 템플릿이 순서 템플릿에 포함되고 첨부 된 DOM 요소 (외측보기 그). 이 경우에도 FormView가 응답하는 이벤트가 form-template 내부의 클릭 (즉, submitButton이 클릭 될 때)에서 발생하기 때문에 FormView가 이벤트에 응답 할 수 있다고 가정했습니다.

<script type="text/template" id="order-template"> 
    <div class="container"> 

    <div class='row'> 

     <div class="col-md-6"> 



    <div id="forForm"> 
    </div> 



     </div> 
     <div class="col-md-6"> 

    ...ommitted... 

     </div> 

    </div> 

    </div> 

</script> 

Answer 1

어떤 이유로, OrderView의 렌더링 기능에서 FormView를 렌더링 할 때 OrderView 컨테이너를 FormView의 요소로 설정할 때 setElement을 사용해야했습니다. 왜 이것이 필요한지 나는 모른다. 나는 또 다른 내 하나 개의보기를 렌더링 많은 백본 애플리케이션 (예를 들어, ul에 대해 별도의 뷰를 사용하는 앱과 목록에있는 각 li)을 본 적이하고 필요한 듯 결코

이의 렌더링 기능에서 관련 코드 the OrderView

 _.each(this.subViews, function(view) {   
      view.setElement(this.$el.find('.orderview-container')).render().el;   
     }, this); 

Answer 2

전적으로 질문을 이해할 수 있을지 확실하지 않지만 일부 논리를 설명하여 질문에 대답하려고합니다.

백본은 jquery on에 따라 DOM에 의해 트리거되는 이벤트에 등록됩니다.
즉, events: {} 개체가 정의 된 백본보기를 인스턴스화하는 순간보기는 모든 자식 요소의 이벤트를 버블 링 할 뷰의 el을 부모 요소로 사용하여 이러한 이벤트를 수신 할 수 있습니다.

부모보기의 자식보기에 el's을 정의한 el이 정의되어있는 경우 논리적으로 볼 때 이러한 이벤트는 최상위 부모까지 버블됩니다.
부모 뷰가 내부 뷰와 동일한 하위 요소에 대한 클릭 이벤트를 모니터링하기로 결정한 경우 하위 뷰에서 전파를 끝내기로 결정하지 않는 한이 이벤트는 상위 상위 요소까지 버블 링됩니다. 하위보기에서 이벤트를 처리하는 메서드에서 $(event.currentTarget).stopPropagation()을 호출하여 구현하십시오.

이 내용이 의미가 있고 문제를 해결하는 데 도움이되기를 바랍니다.