mori-dev/script.js

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CoffeeScript - Backbone.js rollover</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="../libs/jquery.min.js"></script>
<script src="../libs/underscore.js"></script>
<script src="../libs/backbone.js"></script>
<script src="scripts.js"></script>
</head>
<body>

      <h1> 表示の確認</h1>

      <div id="container">
        Loading...
      </div>

      <script type="text/template" id="updated_contents">
        <ul>
          <li>name: <%- name %></li>
        </ul>
      </script>

</body>
</html>

## script.js
$(function(){

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

    var UserView = Backbone.View.extend({
       tagName: "span",
       className: "users",
       render: function( event ) {
         var template = _.template($('#updated_contents').html());
         this.$el.html(template(this.model.toJSON()));
         return this;
       }
    });

    var UsersView = Backbone.View.extend({

      initialize: function() {
        this.collection.bind('change', this.render, this);
        this.render();
      },

      render: function( event ) {
        var that = this;
        $(this.el).empty();

        users.each(function (user) {
          var view = new UserView({ model: user });
          that.$el.append(view.render().el);
        });
        return this;
      }
    });

    var users = new Users();
    users.add([{name: "tanaka"}, {name: "ariyama"}]);

    var users_view = new UsersView({ el: $('#container'), collection: users});
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>CoffeeScript - Backbone.js rollover</title>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script src="../libs/jquery.min.js"></script>
	<script src="../libs/underscore.js"></script>
	<script src="../libs/backbone.js"></script>
	<script src="scripts.js"></script>
	</head>
	<body>

	<h1> 表示の確認</h1>

	<div id="container">
	Loading...
	</div>

	<script type="text/template" id="updated_contents">
	<ul>
	<li>name: <%- name %></li>
	</ul>
	</script>

	</body>
	</html>
	$(function(){

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

	var UserView = Backbone.View.extend({
	tagName: "span",
	className: "users",
	render: function( event ) {
	var template = _.template($('#updated_contents').html());
	this.$el.html(template(this.model.toJSON()));
	return this;
	}
	});

	var UsersView = Backbone.View.extend({

	initialize: function() {
	this.collection.bind('change', this.render, this);
	this.render();
	},

	render: function( event ) {
	var that = this;
	$(this.el).empty();

	users.each(function (user) {
	var view = new UserView({ model: user });
	that.$el.append(view.render().el);
	});
	return this;
	}
	});

	var users = new Users();
	users.add([{name: "tanaka"}, {name: "ariyama"}]);

	var users_view = new UsersView({ el: $('#container'), collection: users});
	});