9

構築中の新しいアプリの Backbone.js を学習しています。REST SERVICE認証のために AJAX call( ) を実行する必要があります。

この電話の正しい場所はどこですか? モデル、ビュー、または他の場所で？特に Backbone.js MVC モデルに関連しています。

<html>
<head>
<script src="lib/jquery-1.6.1.min.js"></script>
<script src="lib/json2.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/backbone-min.js"></script>   

<script language="javascript">
      $(function(){
         var LoginView = Backbone.View.extend({
          el: $("#login-form"),

          events: {
            "click #login": "login"
          },

          login: function(){
              alert("Hello");
           }
        });

        window.LoginView = new LoginView();
      });
    </script>   
  </head>
  <body>
    <form action="/login" id="login-form">
      Username: <input type="text" id="username"><br>
      Password: <input type="password" id="password"><br>
      <button id="login">Login</button>
    </form>
  </body>
</html>
4

3 に答える 3

13

投稿状態 (ユーザー名、パスワード、remember me) と応答状態 (ログイン失敗、ログイン受け入れ) を格納する認証モデルを作成します...

App.Model.authentication= Backbone.Model.extend({
    defaults: {
        Username: "",
        Password: "",
        RememberMe: false,
        LoginFailed: false,
        LoginAccepted: false
    },
    url:"api/authentication"
});

モデルを使用するようにビューを更新します。

   $(function () {
    var LoginView = Backbone.View.extend({
        model: new App.Model.authentication(),
        el: $("#login-form"),
        events: {
            "click #login": "login"
        },

        login: function () {
            this.model.save({username: this.$el.find("#username"),
                password: this.$el.find("#password")}, {
                success: function () {
                    /* update the view now */
                },
                error: function () {
                    /* handle the error code here */
                }
            });
        }
    });
}

);

Model.Save() を呼び出すと、サーバーにポスト リクエストが発行されますが、サーバー上のこのインスタンスでは、実際には何も保存していませんが、資格情報を確認し、同じモデルのオブジェクトを「LoginAccepted」で返送します。フィールドは適切に設定されています。

カスタムの JQuery AJAX Post を実装しないでください - REST インターフェイスを介してフードの下ですべてを処理するバックボーンの精神ではありません。

バックボーンがここで使用する REST インターフェイスとさまざまな REST アクションと URL の詳細: http://codebyexample.info/2012/04/30/backbone-in-baby-steps-part-3/

AJAX と model.save() の議論についてもう 1 つ。アプリケーションが IRC のようなステートレス チャット ルーム (チャット ルーム内の他のユーザーにメッセージを送信するが、メッセージを中央に保存しない) である場合、バックボーンの REST 機能をすべて破棄し、カスタム AJAX 呼び出しでそれらを再実装しますか?あなたは実際に「保存」しているのではなく、実際には「送信」しているだけです。セマンティクスのためだけに、すでに存在する機能を再実装するには、膨大な量の作業が必要になります。常に model.save() を model.post() として読みます - 保存するためだけでなく、送信するためです。

于 2012-07-04T16:29:35.977 に答える
11

DOM インタラクション (フォーム送信を含む) はビューで発生するため、常にビューから開始します。

次に、私があなたなら、カスタム メソッドを User モデルに追加し、そのメソッドをビューから呼び出します。ログイン方法は、何も追加/更新/取得しようとしないため、ネイティブのバックボーン同期に正確には適合しません (セキュリティ上の理由から、サーバーからユーザー パスワードまたはパスワード ハッシュをロードしたくないことに注意してください)。したがって、Backbone fetch() を呼び出さずに、通常の Ajax 呼び出しを行います。それで、ここに行きます：

var UserModel = Backbone.Model.extend({
  ...
  checkLogin: function(name, password) {
    var self = this;
    $.post('/login', { name: name, password: password }, function(data) {
      self.set(data); // data should be in JSON and contain model of this user
    }, 'json').error(
      self.trigger('loginError'); // our custom event
    );
  }
});

そしてビュー：

var UserView = Backbone.View.extend({
  events: {
    'click .login': 'loginSubmit'
  },

  initialize: function() {
     _.bindAll(this, 'loginSubmit', 'loginSuccess', 'loginError');
     this.model.bind('change', this.loginSuccess);
     this.model.bind('loginError', this.loginError);
  },

  loginSubmit: function() {
    var name = 'username', // you get it from some element
        password = '***'; // you get it from another element
    this.model.checkLogin(name, password);
  },

  loginSuccess: function() {
    alert ('You have been logged in');
    console.log(this.model); // should log loaded user model
  },

  loginError: function() {
    alert ('Problem with login');
  }
});

UserModel インスタンスを UserView インスタンスに渡すようにしてください。

var userModel = new UserModel,
    userView = new UserView({ model: userModel });
于 2012-07-04T16:24:03.770 に答える