0

そこで、Backbone.jsを使用してJavaScriptコードを構造化し、モジュラーアプリケーションを使用し始めましたが、イベントに関して問題が発生しました。

フォームを処理して検証する単純なビューを作成したいと思います。将来的には、ライブ検証、ホバー効果などのすべてのJavaScript機能を追加したいと思います。

これは私が今持っている単純化されたコードです：

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');

私が抱えていた問題は、フォームを送信したときにvalidateFields関数が呼び出されないことです。また、コンストラクターでこれを使用してみました。

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

これで、最後のコードは機能しますが、検証関数内の「this」は、Formオブジェクトではなく、$（'＃formid'）オブジェクトになります。

4

2 に答える 2

3

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

残念ながら、このdelegateメソッドは IE の送信イベントでは機能しませんバックボーン ソースのコメントを参照してください

簡単な修正は、このコード行をrenderメソッドに追加することです。

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

また、initialize メソッドで validateFields のコンテキストをバインドする必要があります。

initialize: function() {
  _.bindAll(this, 'render', 'validateFields');
}
于 2011-12-30T13:27:40.900 に答える
0

他の方法で設定elしてみてください：

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
于 2011-12-30T13:14:16.523 に答える