balupton/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Backbone.js introduction for Mickey


## backbone-example.js
Page = Backbone.View.extend({
	tagName: 'div',

	initialize: function(model,options){
		// Chain
		return this;
	},

	render: function(){
		// Chain
		return this;
	}

})

var HomePage = Page.extend({});
var AboutPage = Page.extend({});


/*
.templates {
	display:none;
}


<body>
	<div class="templates">
		<div class="homepage template">
			<div class="homepage view">
				this is the homepage
			</div>
		</div>
		<div class="aboutpage template">
			<div class="aboutpage view">
				this is the aboutpage
			</div>
		</div>
		<div class="app template">
			<div class="app view">
				<div class="homepage wrapper"></div>
				<div class="aboutpage wrapper"></div>
				<button class="clicker"></div>
			</div>
		</div>
	</div>
	<div class="app wrapper"></div>
</body>


	<div class="app wrapper">
		<div>
			<div class="app view">
				<div class="homepage wrapper">
					<div>
						<div class="homepage view">
							this is the homepage
						</div>
					</div>
				</div>
				<div class="aboutpage wrapper">
					<div>
						<div class="aboutpage view">
							this is the aboutpage
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
*/

Application = Backbone.View.extend({
	tagName: 'div',
	subViews: {},

	initialize: function(){
		// Destroy our references
		this.subViews = _.extend({},this.subViews);

		// Create our subViews
		this.subViews.homePage = new HomePage();
		this.subViews.aboutPage = new AboutPage();

		// Chain
		return this;
	},

	render: function(){
		// Prepare
		var me = this;
		var homePage = this.subViews.homePage;
		var aboutPage = this.subViews.aboutPage;

		// Render our template
		$('.app.template').clone().appendTo(this.$el);
		var $homePageWrapper = this.$('.homepage.wrapper');
		var $aboutPageWrapper = this.$('.aboutpage.wrapper')

		// Render our subviews to ourself
		homePage.render().$el.appendTo($homePageWrapper);
		aboutPage.render().$el.appendTo($aboutPageWrapper);

		// Bind our events
		this.$('.clicker').click(function(){
			me.trigger('clickerClick');
		});
	}
});


// Mediator/Controller
var app = new Application();
app.render().$el.appendTo($('.application.wrapper'));

app.on('newTask',function(task){
	alert('you just clicked the clicker');
});
	Page = Backbone.View.extend({
	tagName: 'div',

	initialize: function(model,options){
	// Chain
	return this;
	},

	render: function(){
	// Chain
	return this;
	}

	})

	var HomePage = Page.extend({});
	var AboutPage = Page.extend({});


	/*
	.templates {
	display:none;
	}


	<body>
	<div class="templates">
	<div class="homepage template">
	<div class="homepage view">
	this is the homepage
	</div>
	</div>
	<div class="aboutpage template">
	<div class="aboutpage view">
	this is the aboutpage
	</div>
	</div>
	<div class="app template">
	<div class="app view">
	<div class="homepage wrapper"></div>
	<div class="aboutpage wrapper"></div>
	<button class="clicker"></div>
	</div>
	</div>
	</div>
	<div class="app wrapper"></div>
	</body>



	<div class="app wrapper">
	<div>
	<div class="app view">
	<div class="homepage wrapper">
	<div>
	<div class="homepage view">
	this is the homepage
	</div>
	</div>
	</div>
	<div class="aboutpage wrapper">
	<div>
	<div class="aboutpage view">
	this is the aboutpage
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	*/

	Application = Backbone.View.extend({
	tagName: 'div',
	subViews: {},

	initialize: function(){
	// Destroy our references
	this.subViews = _.extend({},this.subViews);

	// Create our subViews
	this.subViews.homePage = new HomePage();
	this.subViews.aboutPage = new AboutPage();

	// Chain
	return this;
	},

	render: function(){
	// Prepare
	var me = this;
	var homePage = this.subViews.homePage;
	var aboutPage = this.subViews.aboutPage;

	// Render our template
	$('.app.template').clone().appendTo(this.$el);
	var $homePageWrapper = this.$('.homepage.wrapper');
	var $aboutPageWrapper = this.$('.aboutpage.wrapper')

	// Render our subviews to ourself
	homePage.render().$el.appendTo($homePageWrapper);
	aboutPage.render().$el.appendTo($aboutPageWrapper);

	// Bind our events
	this.$('.clicker').click(function(){
	me.trigger('clickerClick');
	});
	}
	});


	// Mediator/Controller
	var app = new Application();
	app.render().$el.appendTo($('.application.wrapper'));

	app.on('newTask',function(task){
	alert('you just clicked the clicker');
	});