バックボーンイベントハンドラは、私は2つのビューを持っている

Question

動作しません。フォームビューには、入力からのデータに応じてモデルの新しいインスタンスを作成する予定のイベントハンドラが1つあります。

ここレイアウトビューです：

var LayoutView = Backbone.View.extend({ 
    el: "#layout", 
    render: function (view) { 
     this.child = view; 
     if (this.child) { 
      this.child.remove(); 
     } 
     this.$el.html(this.child.render().el); 
     return this; 
    } 
}); 

とここに私のフォームビューです：

var ResumeForm = Backbone.View.extend({ 
    events: { 
     'click #create': 'createResume' 
    }, 
    initialize: function() { 
     this.template = _.template($('#new-resume').html()); 
    }, 
    render: function() { 
     this.$el.html(this.template()); 
     return this; 
    }, 
    createResume: function() { 
     // getting values from template inputs and saving them to model 
     var resume = new Resume({ 
      profession: $('#profession').val(), 
      firstName: $('#firstname').val(), 
      lastName: $('#lastname').val() 
     }); 
     // saving a new model to collection instance 
     resumes.add(resume); 
     resume.save(null, { 
      success: function (res) { 
       console.log("POST resume id " + res.toJSON().id); 
      }, 
      error: function() { 
       console.log("Failed to POST"); 
      } 
     }); 
    } 
}); 

マイフォームビューは完全に私のレイアウトビュー内でレンダリングするが、私は値を入力して#createボタンをクリックすると、何も起こりません - 私のモデルは保存されず、私のcreateResumeメソッドのエラーミスも記録されません。レイアウトビューでフォームビューをレンダリングすると、this.$el.html(this.child.render().el);という行は、これらのリスナーをレイアウトビューに追加すると動作するため、すべてのイベントリスナーを破棄するものと思われます。

は、この問題をオーバーライドする任意の方法はありますか？

Answer 1

バックボーンの見解remove機能がelにバインドされたイベントをundelegates。 annotated sourceから

：

remove: function() { 
    this._removeElement(); 
    this.stopListening(); 
    return this; 
}, 

_removeElement: function() { 
    this.$el.remove(); 
}, 

これは、jQueryの.remove()機能（強調鉱山）に関係しています：

Similar to .empty() , the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

ビューを再利用する前にremoveを呼び出した場合は、手動で呼び出す必要がありますthis.delegateEvents()はeventsハッシュと再ワイヤービューはthis.listenTo(...)て聞いていたすべてのイベントからイベントを再バインドします。

しかし、再使用するビューへの最善の方法、stopListeningを呼び出すremoveを呼び出すことなく、あなたがイベントをundelegatesたsetElementを使用することができ、再委任した後、渡された要素にイベントをビューの要素を変更すること。

setElement: function(element) { 
    this.undelegateEvents(); 
    this._setElement(element); 
    this.delegateEvents(); 
    return this; 
}, 

あなたLayoutViewはこのようなものになるだろう：

var LayoutView = Backbone.View.extend({ 
    el: "#layout", 
    render: function(view) { 
     // if the view is different, make sure to undelegate the old view. 
     if (this.child && this.child !== view) this.child.undelegateEvents(); 
     this.child = view; 
     this.child.setElement(this.$el).render(); 
     return this; 
    } 
});