mxriverlynn/1-layout.html

## 1-layout.html
<html>
  <head>
    <script src="jquery-1.6.1.min.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script src="underscore-min.js"></script>
    <script src="backbone-min.js"></script>
    <script src="example.js"></script>

    <style type="text/css">
      fieldset {
        width: 500px;
      }
      #user-edit ul {
        list-style-type: none;
      }
    </style>

    <script id="user-list-template" type="text/x-jquery-tmpl">
      <li>
        ${firstname}
        ${lastname}
      </li>
    </script>
  </head>
  <body>

    <div id="user-list">
      <fieldset>
        <legend>Users</legend>
        <ul></uL>
      </fieldset>
    </div>

  </body>
</html>

## 2-userlist.js
var user1 = new User()
user1.set({firstname: "Derick", lastname: "Bailey", id: 0});
var user2 = new User()
user2.set({firstname: "JoAnn", lastname: "Tsang", id: 1});

var users = new UserList([user1, user2]);

## 3-view.js
var UserListView = Backbone.View.extend({
    el: $("#user-list ul"),

    render: function(){
      var template = $("#user-list-template");
      var html = template.tmpl(this.model.toJSON());
      this.el.html(html);
    }
});

## 4-initial-render.js
var userListView = new UserListView({model: users});
userListView.render();

## 5-extract-template.js
var UserListView = Backbone.View.extend({
    el: $("#user-list ul"),
    template: $("#user-list-template"),

    render: function(){
      var html = this.template.tmpl(this.model.toJSON());
      this.el.html(html);
    }
});

## 6-templated-view.js
var TemplatedView = Backbone.View.extend({
    render: function(){
      var html = this.template.tmpl(this.model.toJSON());
      this.el.html(html);
    }
});

var UserListView = TemplatedView.extend({
    el: $("#user-list ul"),
    template: $("#user-list-template"),
});

## 7-subclass-override.js
var UserEditView = TemplatedView.extend({
    el: $("#user-edit"),
    template: $("#user-edit-template"),

    render: function(){
      TemplatedView.prototype.render.call(this);

      this.save = $("#save");
      this.cancel = $("#cancel");
    }
});


## 8-example.html
<html>
  <head>
    <script src="jquery-1.6.1.min.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script src="underscore-min.js"></script>
    <script src="backbone-min.js"></script>
    <script src="example.js"></script>

    <style type="text/css">
      fieldset {
        width: 500px;
      }
      #user-edit ul {
        list-style-type: none;
      }
    </style>

    <script id="user-list-template" type="text/x-jquery-tmpl">
      <li>
        ${firstname}
        ${lastname}
      </li>
    </script>

    <script id="user-edit-template" type="text/x-jquery-tmpl">
      <fieldset>
        <legend>User Details</legend>
        <label for="firstname">First Name: </label><input type="text" id="firstname" value="${firstname}"><br/>
        <label for="lastname">Last Name: </label><input type="text" id="lastname" value="${lastname}"><br/>
        <button id="save">Save</button>
        <button id="cancel">Cancel</button>
      </fieldset>
    </script>
  </head>
  <body>

    <div id="user-edit"></div>

    <div id="user-list">
      <fieldset>
        <legend>Users</legend>
        <ul></uL>
      </fieldset>
    </div>

  </body>
</html>

## 9-example.js
$(function(){

  var TemplatedView = Backbone.View.extend({
      render: function(){
        var html = this.template.tmpl(this.model.toJSON());
        this.el.html(html);
      }
  });

  var UserListView = TemplatedView.extend({
      el: $("#user-list ul"),
      template: $("#user-list-template"),
  });

  var UserEditView = TemplatedView.extend({
      el: $("#user-edit"),
      template: $("#user-edit-template"),

      render: function(){
        TemplatedView.prototype.render.call(this);

        this.save = $("#save");
        this.cancel = $("#cancel");
      }
  });

  var User = Backbone.Model.extend({
  });

  var UserList = Backbone.Collection.extend({
    model: User
  });

  var user1 = new User()
  user1.set({firstname: "Derick", lastname: "Bailey", id: 0});
  var user2 = new User()
  user2.set({firstname: "JoAnn", lastname: "Tsang", id: 1});

  var users = new UserList([user1, user2]);
  var userListView = new UserListView({model: users});
  userListView.render();

  var userEditView = new UserEditView({model: user1});
  userEditView.render();
});
	<html>
	<head>
	<script src="jquery-1.6.1.min.js"></script>
	<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
	<script src="underscore-min.js"></script>
	<script src="backbone-min.js"></script>
	<script src="example.js"></script>

	<style type="text/css">
	fieldset {
	width: 500px;
	}
	#user-edit ul {
	list-style-type: none;
	}
	</style>

	<script id="user-list-template" type="text/x-jquery-tmpl">
	<li>
	${firstname}
	${lastname}
	</li>
	</script>
	</head>
	<body>

	<div id="user-list">
	<fieldset>
	<legend>Users</legend>
	<ul></uL>
	</fieldset>
	</div>

	</body>
	</html>
	var user1 = new User()
	user1.set({firstname: "Derick", lastname: "Bailey", id: 0});
	var user2 = new User()
	user2.set({firstname: "JoAnn", lastname: "Tsang", id: 1});

	var users = new UserList([user1, user2]);
	var UserListView = Backbone.View.extend({
	el: $("#user-list ul"),

	render: function(){
	var template = $("#user-list-template");
	var html = template.tmpl(this.model.toJSON());
	this.el.html(html);
	}
	});
	var userListView = new UserListView({model: users});
	userListView.render();
	var UserListView = Backbone.View.extend({
	el: $("#user-list ul"),
	template: $("#user-list-template"),

	render: function(){
	var html = this.template.tmpl(this.model.toJSON());
	this.el.html(html);
	}
	});
	var TemplatedView = Backbone.View.extend({
	render: function(){
	var html = this.template.tmpl(this.model.toJSON());
	this.el.html(html);
	}
	});

	var UserListView = TemplatedView.extend({
	el: $("#user-list ul"),
	template: $("#user-list-template"),
	});
	var UserEditView = TemplatedView.extend({
	el: $("#user-edit"),
	template: $("#user-edit-template"),

	render: function(){
	TemplatedView.prototype.render.call(this);

	this.save = $("#save");
	this.cancel = $("#cancel");
	}
	});
	$(function(){

	var TemplatedView = Backbone.View.extend({
	render: function(){
	var html = this.template.tmpl(this.model.toJSON());
	this.el.html(html);
	}
	});

	var UserListView = TemplatedView.extend({
	el: $("#user-list ul"),
	template: $("#user-list-template"),
	});

	var UserEditView = TemplatedView.extend({
	el: $("#user-edit"),
	template: $("#user-edit-template"),

	render: function(){
	TemplatedView.prototype.render.call(this);

	this.save = $("#save");
	this.cancel = $("#cancel");
	}
	});

	var User = Backbone.Model.extend({
	});

	var UserList = Backbone.Collection.extend({
	model: User
	});

	var user1 = new User()
	user1.set({firstname: "Derick", lastname: "Bailey", id: 0});
	var user2 = new User()
	user2.set({firstname: "JoAnn", lastname: "Tsang", id: 1});

	var users = new UserList([user1, user2]);
	var userListView = new UserListView({model: users});
	userListView.render();

	var userEditView = new UserEditView({model: user1});
	userEditView.render();
	});