/cdnsrc/js/view/DocumentAreaView.js

/**
	Aaron Greenlee
	http://aarongreenlee.com/
	
	This work is licensed under a Creative Commons Attribution-Share-Alike 3.0
	Unported License.
	
	// Original Info -----------------------------------------------------------
	Author			: Aaron Greenlee
	Created      	: 12/19/2010 9:53:28 AM
	
	Document Area View for a Backbone.js example application.
	
	// Modifications :----------------------------------------------------------
	
*/

var DocumentAreaView = Backbone.View.extend
({
	// Views always have a DOM element, even if it is invisible in the
	// page. This area view will be bound to an existing element, so, I
	// will use a jQuery selector to select the element. If I had not
	// done selected an existing element -- or defined a 'tagName',
	// backbone.js would have created a <div /> element that is simply
	// not yet associated with the document. 
	el : $('#container')
	
	,events : {
		'click span.logCollection' : 'logCollection'
	}

	,selectedLast: null
	
	,selectedModel: null
	
	// Initialize our view.
	,initialize: function () {
		
		//_.bindAll(this, 'addDocument', 'addAll', 'render');
		_.bindAll(this, 'addDocument');
		
		this.model.bind('refresh', this.render);
		//this.model.bind('all', this.render);
		this.layout = DocumentAreaTemplate;
		
		// Return this to allow chaining.
		return this;
	}
	,render : function ()
	{		
		// Use jQuery to select this view's element.
		$(this.el)
			.empty()
			.html(this.layout);	
		
		// Render our Collection
		this.model.each(this.addDocument)
		
		// Return this to allow chaining.
		return this;
	}
	
	,addDocument : function (Doc)
	{
		
		var ModelView = new DocumentListView
		({
			// Bind the new list-item view to our new model instance.
			 model : Doc
			// Optionally, you may also provide a id for the new HTML 
			// element by passing it to our constructor.
			,id : 'document_' + Doc.id
			,parent : this
		});
		this.$('#documentListing ul').append( ModelView.render().el );
		
		// Return this to allow chaining.
		return this;
	}
	
	,showDocument : function (Doc)
	{
	
		this.selectedModel = Doc;

		if(this.selectedLast) {
			this.selectedLast.change();
		}

		if(!this.selectedModel.hasChanged()) {
			this.selectedModel.change();
		}
		
		var ModelView = new DocumentDetailView({model : Doc});
		$('#documentDetailContainer').empty().html(
			ModelView.render().el
		);
		
		// Return this to allow chaining.
		return this;
	}
	
	// A simple helper method useful while I was developing the delete
	// feature.
	,logCollection : function () 
	{
		console.log(this.model.models.length);
	}
});