Skip to content

Instantly share code, notes, and snippets.

@mxriverlynn
Created June 15, 2011 03:12
Show Gist options
  • Save mxriverlynn/1026406 to your computer and use it in GitHub Desktop.
Save mxriverlynn/1026406 to your computer and use it in GitHub Desktop.
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>
@mxriverlynn
Copy link
Author

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
Copy link

mythz commented Jun 15, 2011

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

@thegreyspot
Copy link

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

@jfairley
Copy link

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

@spairo
Copy link

spairo commented Jun 9, 2014

thanks.

@abdounasser202
Copy link

cool!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment