public
Last active

simple backbone.js examples

  • Download Gist
1-ModelWithChangedEvents.js
JavaScript
1 2 3 4 5 6 7 8 9
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"});
2-ModelToJSON.js
JavaScript
1
var someJSON = someModel.ToJSON();
3-SimpleLoginForm.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">Login</button>
</form>
4-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
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()});
5-TheCompleteExample.html
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 61
<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>

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?

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. :)

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

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

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

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.