web-dev-qa-db-ja.com

送信イベントをフォームにバインドするバックボーンを取得するにはどうすればよいですか？

次のコードを使用してビューを作成しています。

LoginForm = Backbone.View.extend({

    tagName :"form"
    ,id : "login-form"
    ,className :"navbar-form"
    ,initialize: function () {
            this.model = new StackMob.User();
            this.render();
    }
    ,render: function () {
            $(this.el).html(this.template());
            return this;
    }
    ,events : {
            "change" : "change"
            ,"submit #login-form" : "login"
    }
    ,login : function( event) {
            event.preventDefault();
            var self = this;
            this.model.login(true, {
                    success: function( model) {
                            app.alertSuccess( "User logged in");
                            self.render();
                    }
                    ,error: function( model, response) {
                            app.alertError("Could not login  user: " + response.error_description);
                    }
            });
            event.currentTarget.checkValidity();
            return false;
    }
// rest of code

そしてテンプレート：

<input name="username" class="span2" type="email" placeholder="Email" required >
<input name="password" class="span2" type="password" placeholder="Password" required >
<button id="login-button" type="submit" class="btn">Sign in</button>

ボタンをバインドすると、ログイン関数が呼び出されます。フォーム送信イベントにバインドすると、ログイン関数は呼び出されません。 idとformタグがテンプレートの一部である場合、フォームをバインドすることもできますが、これはここでやりたいことではありません。

この場合、フォーム送信にバインドするにはどうすればよいですか？

backbone.jsbackbone-viewsbackbone-events
15
Jim Barrows
"submit #login-form" : "login"

Backboneは子孫の間でのみこのIDを検索すると思います。したがって、独自のビュー要素と一致することはありません。使ってみませんか：

"submit": "login"

あなたが変化のためにしたように。
念のため、Backboneのコードを確認します。

編集：
セレクターを置くと、バックボーンは

this.$el.on(event, selector, method);

の代わりに

this.$el.on(event, method);

また、jQueryのonメソッドは、代わりに、要素自体を除いて、要素のdescendantsにのみセレクターを適用します。

36
Loamhoof

バックボーンを間違って使用しています。だからあなたがやりたいことは、

template: my_template_string,
render: function () {
    this.el.innerHTML = this.template();
},
events: {
    "submit #login-form": function (event) {}
}

どこ this.template に設定されています

<form id="login-form" class="navbar-form">
    <input name="username" class="span2" type="email" placeholder="Email" required >
    <input name="password" class="span2" type="password" placeholder="Password" required >
    <button id="login-button" type="submit" class="btn">Sign in</button>
</form>

そして、それはのみ意味がありませんか？ IDとクラス名を入力要素から分離する必要があるのはなぜですか？ところで、あなたはまだsubmitで裸のキャッチオールを行うことができますが、私の方法でのみ、

  • <form>クラス、および<form>属性は、バックボーンビューだけでなく、フォームのテンプレートに関連付けられています。
  • 適切な送信を明示的にキャプチャしますか？
  • 複数の送信イベントをサポートできますか（1つのテンプレートに2つのフォームがある場合）。
3
Evan Carroll

たぶん、フォーム送信イベントにバインドすると、フォームを送信するだけで「送信」イベントが発生します。以下のコードを追加して、もう一度お試しください。

$('#id').submit(function(ev) {

});
0
suoyong