public
Last active

binding a button enable/disable to a backbone model

  • Download Gist
1-form.html
HTML
1 2 3 4 5
<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>
2-credentials.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14
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);
}
});
3-loginview.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
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;
}
});
4-example.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
$(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()});
});
5-example.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.