Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
binding a button enable/disable to a backbone model
<form action="/login" id="login-form">
Username: <input type="text" id="username"><br>
Password: <input type="password" id="password"><br>
<button id="login" disabled="true">Login</button>
</form>
var Credentials = Backbone.Model.extend({
initialize: function(){
this.bind("change", this.attributesChanged);
},
attributesChanged: function(){
var valid = false;
if (this.get('username') && this.get('password'))
valid = true;
this.trigger("validated", valid);
}
});
var LoginView = Backbone.View.extend({
el: "#login-form",
events: {
"click #login": "performLogin",
"change #username": "setUsername",
"change #password": "setPassword"
},
initialize: function(){
this.username = $("#username");
this.password = $("#password");
this.loginButton = $("#login");
this.model.view = this;
this.model.bind("validated", this.validated);
},
validated: function(valid){
if (valid){
this.view.loginButton.removeAttr("disabled");
} else {
this.view.loginButton.attr("disabled", "true");
}
},
setUsername: function(e){
this.model.set({username: this.username.val()});
},
setPassword: function(e){
this.model.set({password: this.password.val()});
},
performLogin: function(){
var user= this.model.get('username');
var pword = this.model.get('password');
alert("You logged in as " + user + " and a password of " + pword);
return false;
}
});
$(function(){
var Credentials = Backbone.Model.extend({
initialize: function(){
this.bind("change", this.attributesChanged);
},
attributesChanged: function(){
var valid = false;
if (this.get('username') && this.get('password'))
valid = true;
this.trigger("validated", valid);
}
});
var LoginView = Backbone.View.extend({
el: "#login-form",
events: {
"click #login": "performLogin",
"change #username": "setUsername",
"change #password": "setPassword"
},
initialize: function(){
this.username = $("#username");
this.password = $("#password");
this.loginButton = $("#login");
this.model.view = this;
this.model.bind("validated", this.validated);
},
validated: function(valid){
if (valid){
this.view.loginButton.removeAttr("disabled");
} else {
this.view.loginButton.attr("disabled", "true");
}
},
setUsername: function(e){
this.model.set({username: this.username.val()});
},
setPassword: function(e){
this.model.set({password: this.password.val()});
},
performLogin: function(){
var user= this.model.get('username');
var pword = this.model.get('password');
alert("You logged in as " + user + " and a password of " + pword);
return false;
}
});
window.LoginView = new LoginView({model: new Credentials()});
});
<html>
<head>
<script src="jquery-1.6.1.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script src="example.js"></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" disabled="true">Login</button>
</form>
</body>
</html>

In case, if the user hasn't fill both user/pass, what would be the action. we need to throw error or need to highlight the element. how do you achieve that? and what is the good practice for that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment