バックボーンのサブビューイベントが起動しない

Question

バックボーンに複数のサブビューを持つビューがあります。サブビューのイベントは発砲していないので、理由を理解できません。私は火にサブビューのイベントを取得する方法を示してチュートリアルを追ってきた：

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

次はコードの関連部分です：ビューが正しく表示され

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"); 
     } 
    } 
}); 

が、いつでもNewTaskFormというIDを持つ送信ボタンをクリックします。タスクビューのイベントは発生しますが、スケジュールビューのイベントは発生しません。私は間違って何をしていますか？

EDIT：

次はテンプレートです：

<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

[OK]を、2つの方法があります。

まず道

は簡単な方法は、へ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 renderメソッドでこれを追加し

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

とにかくあなたのイベントメソッドでそれを行う呼び出すことができますすべてを簡単な1つの視点で行います。