jo/index.html

## index.html
<!doctype html>
<html lang=en>
<head>
  <meta charset=utf-8>
  <title>Backbone Event Delegation Tests</title>
  <script src="http://documentcloud.github.com/backbone/test/vendor/jquery-1.4.2.js"></script>
  <script src="http://documentcloud.github.com/backbone/test/vendor/underscore-1.1.3.js"></script>
  <script src="http://documentcloud.github.com/backbone/backbone.js"></script>
  <script>
    $(function() {
      var MyView = Backbone.View.extend({
        tagName: 'p',

        initialize: function() {
          console.log('initialize MyView');
          _.bindAll(this, 'render', 'greet');
        },

        render: function() {
          console.log('MyView.render called');
          $(this.el).html('This is MyView.');
        },

        events: {
          'click': 'greet'
        },

        greet: function() {
          console.log('MyView.greet called');
          $(this.el).append(' clicked');
        }
      });

      var Workspace = Backbone.Controller.extend({
        initialize: function() {
          console.log('initialize Workspace');
          this.main = $('#main');
          this.view = new MyView;

          this.view.render();
        },

        routes: {
          '': 'home',
          'welcome': 'welcome'
        },

        home: function() {
          console.log('Workspace.home called');

          // this would be a decent better fix:
          // this.main.find('> *').detach();

          this.main.html(this.view.el);

          // this is an ugly fix:
          // this.view.delegateEvents();
        },

        welcome: function() {
          console.log('Workspace.welcome called');
          this.main.html('Welcome!');
        }
      });

      new Workspace;
      Backbone.history.start();
    });
  </script>
  </head>
  <body>
    <article>
      <h1>Backbone Event Delegation Tests</h1>
      <p>click the text below, say <a href="#welcome">welcome</a>, than go <a href="#">back</a> and click the text below again. Nothing will happen.</p>
      <div id=main>initial content</div>
    </article>
  </body>
</html>
	<!doctype html>
	<html lang=en>
	<head>
	<meta charset=utf-8>
	<title>Backbone Event Delegation Tests</title>
	<script src="http://documentcloud.github.com/backbone/test/vendor/jquery-1.4.2.js"></script>
	<script src="http://documentcloud.github.com/backbone/test/vendor/underscore-1.1.3.js"></script>
	<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
	<script>
	$(function() {
	var MyView = Backbone.View.extend({
	tagName: 'p',

	initialize: function() {
	console.log('initialize MyView');
	_.bindAll(this, 'render', 'greet');
	},

	render: function() {
	console.log('MyView.render called');
	$(this.el).html('This is MyView.');
	},

	events: {
	'click': 'greet'
	},

	greet: function() {
	console.log('MyView.greet called');
	$(this.el).append(' clicked');
	}
	});

	var Workspace = Backbone.Controller.extend({
	initialize: function() {
	console.log('initialize Workspace');
	this.main = $('#main');
	this.view = new MyView;

	this.view.render();
	},

	routes: {
	'': 'home',
	'welcome': 'welcome'
	},

	home: function() {
	console.log('Workspace.home called');

	// this would be a decent better fix:
	// this.main.find('> *').detach();

	this.main.html(this.view.el);

	// this is an ugly fix:
	// this.view.delegateEvents();
	},

	welcome: function() {
	console.log('Workspace.welcome called');
	this.main.html('Welcome!');
	}
	});

	new Workspace;
	Backbone.history.start();
	});
	</script>
	</head>
	<body>
	<article>
	<h1>Backbone Event Delegation Tests</h1>
	<p>click the text below, say <a href="#welcome">welcome</a>, than go <a href="#">back</a> and click the text below again. Nothing will happen.</p>
	<div id=main>initial content</div>
	</article>
	</body>
	</html>