BackboneJS：ビューからのフォーム送信時のフォーム検証のトリガー

Question

私は、Backbone.jsを使用してJavaScriptコードを構築し、モジュール式アプリケーションを作成し始めました。

フォームを処理して検証する簡単なビューを作成します。私が持っていた問題がvalidateFieldsということです

var Form = Backbone.View.extend({ 
    attributes: { 
     att1 = 'att1', 
     att2 = 'att2' 
    }, 
    events: { 
     'submit': 'validateFields' 
    }, 
    initialize: function(element) { 
     this.el = $(element); 
    }, 
    validateFields: function() { 
     alert(this.attributes.att1); //do something 
     return false; 
    } 
}); 

var f = new Form('#formid'); 

：将来的には私は、

これは単純化されたコードである私が今持っているなど、効果を置くライブ検証のように、すべてのjavascript functionallityを追加したいと思いますフォームを送信するときに関数が呼び出されません。

this.el.bind('submit', this.validateFields); 

さて、その最後のコードは動作しますが、「これは」検証関数の内部で代わりに私のFormオブジェクトの$（「＃のフォームID」）オブジェクト、次のようになります。また、私は、コンストラクタでこれを使用してみました。

Answer 1

他の方法であなたのel設定してみてください：（またはそれを変更）あなたもinitializeメソッドを削除することができます。この場合、

var f = new Form({el: '#formid'}); 

：

var Form = Backbone.View.extend({ 
    // ... 
    initialize: function() { 
     // Some code 
    }, 
    // ... 
}); 

限り、このコードに関しては：this.el.bind('submit', this.validateFields); 。あなたはFormオブジェクトのコンテキストを保存したい場合は、バインディングを使用する必要があります

this.el.bind('submit', _.bind(this.validateFields, this)); // using Underscore method 
this.el.bind('submit', $.proxy(this.validateFields, this)); // using jQuery method 

Answer 2

バックボーンはeventsハッシュでコールバックにイベントをバインドするjQueryのdelegateメソッドを使用しています。

残念ながらdelegate方法は、簡単に修正があなたのrenderメソッドにこのコード行を追加することですIE See comment in Backbone source

に提出したイベントのために動作しません。

render: function() { 
    //render the view 
    $(this.el).submit(this.validateFields); 
} 

パウロはイベントがデリゲート（）jQueryの機能が、問題を使用して呼ばれて言ったようにあなたはまた、initializeメソッドで答えを

initialize: function() { 
    _.bindAll(this, 'render', 'validateFields'); 
}