백본 서브 뷰 이벤트가 실행되지 않습니다.

Question

하위보기가 여러 개인 백본에서보기가 있습니다. 하위보기의 이벤트가 실행되지 않으며 이유를 이해하는 데 문제가 있습니다.

var TaskView = Backbone.View.extend({ 
    tagName: "div", 
    template: _.template($("#taskAddTemplate").html()), 
    render: function() { 
     // append the template to the element 
     this.$el.append(this.template); 

     var scheduleData = new ScheduleModel(this.model.attributes.Schedule); 
     this.Schedule = new ScheduleView({ model: scheduleData }); 
     this.assign(this.Schedule, "#ScheduleDetails"); 
     return this; 
    }, 
    assign: function(view, selector) { 
     view.setElement(this.$(selector)).render(); 
    }, 
    events: { 
     "submit #NewTaskForm": function (e) { 
      e.preventDefault(); 

      $("#SaveTaskButton").effect("pulsate", { times: 0 }, 0); 
      console.log("In submit for task"); 
     } 
    } 

}); 

var ScheduleView = Backbone.View.extend({ 
    tagName: "div", 
    template: _.template($("#scheduleAddTemplate").html()), 
    render: function() { 
     // append the template to the element 
     this.$el.append(this.template(this.model.toJSON())); 
     // set the schedule type 
     var renderedInterval = SetScheduleType(this.model); 
     // append to the interval 
     $("#Interval", this.$el).append(renderedInterval.el); 
     return this; 
    }, 
    events: { 
     "submit #NewTaskForm": function (e) { 
      e.preventDefault(); 
      console.log("In submit for schedule"); 
     } 
    } 
}); 

의 의견이 제대로 표시되지만 때마다 다음

https://ianstormtaylor.com/rendering-views-in-backbonejs-isnt-always-simple

코드의 관련 부분이다 : 나는 어떻게 화재에 서브 뷰의 이벤트를 얻는 방법을 보여주는 자습서를 다음 봤는데 NewTaskForm id로 제출 단추를 클릭합니다. 일정보기에는 표시되지 않지만 일정보기에는 이벤트가 발생합니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

편집 : 다음

은 템플릿 :

<script id="taskAddTemplate" type="text/html"> 
    <nav class="navbar navbar-default" id="TaskMenu"> 
     <ul class="nav navbar-nav" id="TaskTabs"> 
      <li role="presentation"><a href="#TaskDetails" aria-controls="Task Details" role="tab" data-toggle="tab">Task Details</a></li> 
      <li role="presentation"><a href="#ScheduleDetails" aria-controls="Schedule Details" role="tab" data-toggle="tab">Schedule Details</a></li> 
     </ul> 
    </nav> 

    <form class="form form-horizontal" id="NewTaskForm"> 
     <div class="tab-content"> 

      <div role="tabpanel" class="tab-pane" id="TaskDetails"> 
       <div class="form-group"> 
        <label class="col-xs-2 control-label">Task Name: </label> 
        <input class="col-xs-10 form-control" type="text" id="TaskName" name="TaskName" /> 

       </div> 
       <div class="form-group"> 
        <label class="col-xs-2 control-label">Message: </label> 
        <textarea class="col-xs-10 form-control" rows="5" type="text" id="Message" name="Message"></textarea> 
       </div> 
      </div> 

      <div role="tabpanel" class="tab-pane" id="ScheduleDetails"></div> 

      <div class="form-group"> 
       <div class="container"> 
        <div class="col-xs-2"> 
         <input type="submit" class="form-control btn btn-primary col-xs-2" id="SaveTaskButton" /> 
        </div> 
        <div class="col-xs-2"> 
         <input type="button" class="form-control btn btn-danger col-xs-2" id="CancelNewTaskButton" value="Cancel" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </form> 
</script> 


<script id="scheduleAddTemplate" type="text/html"> 
    <div id="Schedule" class="form-group"> 

     <div class="row"> 
      <div class="col-xs-3"> 
       <span class="col-xs-1"></span> 
       <select class="form-control" id="ScheduleType" data-val="true" data-val-required="The Schedule Type Field is require."> 
        <option value="hourly">Hourly</option> 
        <option value="daily">Daily</option> 
        <option value="weekly">Weekly</option> 
        <option value="monthly">Monthly</option> 
       </select> 
      </div> 
      <div id="Interval" class="col-xs-9"></div> 

     </div> 

     <div id="StartAndEnd" class="row"> 

      <label class="control-label col-xs-1">Start</label> 
      <input type="text" class="date form-control col-xs-2" id="StartDate" value="<%= StartDate %>" /> 
      <input type="text" class="time form-control col-xs-1" id="StartTime" value="<%= StartTime %>" /> 
      <label class="control-label col-xs-1">End</label> 
      <input type="text" class="date form-control col-xs-1" id="EndDate" value="<%= EndDate %>" /> 
      <span class="col-xs-2"></span> 
     </div> 
    </div> 
</script> 

Answer 1

확인은 두 가지 방법이 있습니다 :

첫 번째 방법

쉬운 방법은 NewTaskForm로 이동하는 것 scheduleAddTemplate. 그 방법은 이벤트가 트리거됩니다, 그리고 당신은

events: { 
    "submit #NewTaskForm": 'onSubmit' 
}, 
onSubmit: function(ev){ 
    e.preventDefault(); 
    console.log("In submit for schedule"); 
    //TODO: Call the save method 
    this.model.save(
     success: function(...){ 
      this.trigger('save') 
     } 
    ) 
} 

과 TaskView에

이 렌더링 방법

var scheduleData = new ScheduleModel(this.model.attributes.Schedule); 
this.Schedule = new ScheduleView({ model: scheduleData }); 
this.assign(this.Schedule, "#ScheduleDetails"); 
this.listenTo(this.Schedule, "save", function(...){}) 

두 번째 방법이 추가 트리거를 해고 할 수

다른 방법은 TaskView에서 ScheduleView까지 메소드를 호출하는 것입니다. 이미 뷰를 저장하는 변수가로서 당신은 당신이 일정보기에서 여분의 논리가 없기 때문에,이 여분의보기가 필요하지 않다고하고 당신이 할 수있는,

events: { 
    "submit #NewTaskForm": function (e) { 
     e.preventDefault(); 

     $("#SaveTaskButton").effect("pulsate", { times: 0 }, 0); 
     console.log("In submit for task"); 
     this.Schedule.method_name() 
    } 
} 

어쨌든 이벤트 방법에 그것을 호출 할 수 있습니다 모든 것을 하나의 간단한 관점에서하십시오.