Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
simple backbone.js examples
var SomeModel = Backbone.Model.extend({});
someModel = new SomeModel();
someModel.bind("change", function(model, collection){
alert("You set some_attribute to " + model.get('some_attribute'));
});
someModel.set({some_attribute: "some value"});
var someJSON = someModel.ToJSON();
<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>
var Credentials = Backbone.Model.extend({});
var LoginView = Backbone.View.extend({
el: $("#login-form"),
events: {
"click #login": "login"
},
initialize: function(){
var self = this;
this.username = $("#username");
this.password = $("#password");
this.username.change(function(e){
self.model.set({username: $(e.currentTarget).val()});
});
this.password.change(function(e){
self.model.set({password: $(e.currentTarget).val()});
});
},
login: 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="json2.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script language="javascript">
$(function(){
var SomeModel = Backbone.Model.extend({});
someModel = new SomeModel();
someModel.bind("change", function(model, collection){
alert("You set some_attribute to " + model.get('some_attribute'));
});
someModel.set({some_attribute: "some value"});
var Credentials = Backbone.Model.extend({});
var LoginView = Backbone.View.extend({
el: $("#login-form"),
events: {
"click #login": "login"
},
initialize: function(){
var self = this;
this.username = $("#username");
this.password = $("#password");
this.username.change(function(e){
self.model.set({username: $(e.currentTarget).val()});
});
this.password.change(function(e){
self.model.set({password: $(e.currentTarget).val()});
});
},
login: 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()});
});
</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>
@mythz

BTW Great Backbone tutorial!

Just curious as why you chose to use $(e.currentTarget).val() over this.value or $(this).val() ?
i.e. is it required or just style preference?

@derickbailey

mostly ignorance. :D

i'm still learning all these different frameworks, how they work together, what is suited for when, etc... i wasn't even aware of this.value or $(this).val() in this particular context. i probably could have figured that out eventually, but there's just too many ways to do the same thing. :)

@mythz

I agree with that, too many ways to do the same thing - ideally there'd only be one that works everywhere :)

@thegreyspot

Noob question: so where is the security here? Why stops anyone from just code inspecting and getting the password?
thanks

@jfairley

@thegreyspot, 'password' refers to the id of the <input>. It's not a hard-coded value.

@spairo

thanks.

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.