Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

binding a button enable/disable to a backbone model

View 1-form.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>
View 1-form.html
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);
}
});
View 1-form.html
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;
}
});
View 1-form.html
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()});
});
View 1-form.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>

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
Something went wrong with that request. Please try again.