Question

我正在学习Backbone.js，我正在构建一个新的应用程序。我需要执行AJAX调用（REST SERVICE）进行身份验证。

此次通话的正确位置在哪里？在模型，视图或其他地方？特别与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>

Answer 1

创建一个身份验证模型，用于存储帖子状态（用户名，密码，记住我）以及响应状态（登录失败，登录已接受）......

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（）会向服务器发出一个post请求，尽管在服务器上这个实例中你实际上并没有保存任何东西，但检查凭据并发回一个具有相同模型的对象，但是“LoginAccepted”字段设置正确。

不要实现自定义JQuery AJAX帖子 - 它不是骨干的精神，它通过其REST接口为您提供全部处理。

有关REST接口以及主干在此处使用的各种REST操作和URL的更多详细信息：http://codebyexample.info/2012/04/30/backbone-in-baby-steps-part-3/

AJAX vs model.save（）辩论还有一件事。如果您的应用程序是像IRC这样的无状态聊天室 - 它会向聊天室中的其他用户发送消息但不会集中保存消息...您是否会丢弃所有主干的REST功能并使用自定义AJAX调用重新实现它们因为你实际上没有'保存'，你真的只是'发送'。这将花费你大量的工作来重新实现已经存在的功能，仅仅是因为语义。始终将model.save（）读作model.post（） - 它不仅仅用于保存 - 用于发送。

Answer 2

您总是从视图开始，因为您的DOM交互（包括表单提交）发生在视图中。

然后，如果我是你，我会向User模型添加一个自定义方法，并从视图中调用该方法。登录方法不完全适合本机Backbone同步，因为您没有尝试添加/更新/检索任何内容（请注意，出于安全原因，您不希望从服务器加载用户密码或密码哈希）。所以你不用调用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 });

Answer 3

ReST NOT 是一个标准，只是一个规范，任何实际的开发人员都会在适当的时候混合使用ReST和RPC。也就是说，这些答案都没有指出服务器响应应返回令牌（sessionID，JSON Web令牌等）并删除纯文本密码的事实。如果不这样做会带来安全风险。

backbone.js ajax调用

3 个答案: