jboulhous/1-ModelWithChangedEvents.js

## 1-ModelWithChangedEvents.js
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
var someJSON = someModel.ToJSON();

## 3-SimpleLoginForm.html
<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
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>
  <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>
	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"});
	<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>