Skip to content

@derickbailey /1-form.html
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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>
@3gwebtrain

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.