Joh*_*per 9 javascript backbone.js
我正在学习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>
rea*_*ers 13
创建一个身份验证模型,用于存储帖子状态(用户名,密码,记住我)以及响应状态(登录失败,登录已接受)...
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 - 自定义AJAX调用它发送消息给其他用户在聊天室,但不集中保存的消息......你会扔掉所有的骨干REST功能和重新实现它们因为你实际上没有'保存',你真的只是'发送'.这将花费你大量的工作来重新实现已经存在的功能,仅仅是因为语义.始终将model.save()读作model.post() - 它不仅仅用于保存 - 用于发送.
mvb*_*fst 11
您总是从视图开始,因为您的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 });
| 归档时间： |
|
| 查看次数： |
27252 次 |
| 最近记录： |