Untitled

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