A subapp/subsystem from the admin spa.

all.js

//Controller and how it handles any route
var Router = require('../routers/base_router.js');
var LoginView = require('../views/admin_login.js');
var ContentView = require('../views/admin_content.js');
var HeadView = require('../views/admin_header.js');
module.exports = Marionette.Object.extend({
	
	rootview: null,
	initialize: function(options){	
		this.router = new Router({controller:this});
		this.rootview = options.rootview;
	},
	
	testing: function(){
		
		console.log("testing in admin app");
		//Backbone.Radio.channel("layouts").command("change:view","content",ContentView, {path: "notification"});
	},
	
	home: function(){
		
		//not instantiated
		//Backbone.Radio.channel("layouts").command("change:view","content",LoginView);
		/**
		 * show login box 
		 */
		
		this.rootview.showViews({header: HeadView, content: LoginView, footer: null});
	},
	
	welcome: function(){
		
		console.log("Welcome to the account.");
		//Backbone.Radio.channel("layouts").command("change:view","content",ContentView, {});
		/**
		 * What i would like to show for a logged in admin 
		 */
		this.rootview.showViews({header: HeadView, content: {view: ContentView, path: null}, footer: null});
	},
	
	users: function(){
		this.rootview.showViews({header: HeadView, content: {view: ContentView, path: "users"}, footer: null});
	}
});



//rootivew and its showview function which just renders any vew it is given
showViews: function(options){
		//console.log(typeof(options.content));
		if(options.header)	this.getRegion("header").show(new options.header());
		if(options.content)	this.getRegion("content").show(new options.content.view({path:options.content.path}));
		if(options.footer)	this.getRegion("footer").show(new options.footer());
}


//content vew, a layout view that is a view child of the rootview
// It can also handle rendering of a different views in main_content region so we must pass 
// path parameter from the rootview and it uses that to decide wich subview to render in the updateRegion function
var NavView = require('./admin_nav.js');
var NotifView = require('./notif_view.js');
var UserMgt = require('./user_mgt.js');

var UserDump = require('./users_dump.js');

module.exports = Marionette.LayoutView.extend({
	nav_view:null,
	notif_view:null,
	user_mgt_view:null,
	path: null,
	initialize: function(options){
		console.log(JSON.stringify(options));
		this.notif_view = new NotifView();
		this.nav_view = new NavView();
		this.user_mgt_view = new UserMgt({
			model: new Backbone.Model({name:"Bunmi"}),
			collection: new Backbone.Collection(UserDump)
		});
		
		this.listenTo(this.nav_view,"state_change",this.updateContent);
		if(options.path)	this.path=options.path;
		this.on('show_subview', this.updateContent, this);
		
	},
	
	template: require('../../templates/admin/admin_content.hbs'),
	
	regions:{
		
		main_content: '.admin_contentbox_main',
		nav_content: '.admin_contentbox_nav'
	},
	
	onAttach: function(){
		
		
		this.getRegion("nav_content").show(this.nav_view);
		if(this.path !==null) 	this.trigger("show_subview", this.path);
	},
	
	//based on arg, updates the main_content region
	//with appropriate view
	//possibility of memory leak manually clean up view
	updateContent: function(arg){
		
		//
		if(arg==="notification"){
			
			this.getRegion("main_content").show(new NotifView());
		}else if(arg ==="users"){
			
			this.getRegion("main_content").show(new UserMgt({
				model: new Backbone.Model({name:"Bunmi"}),
				collection: new Backbone.Collection(UserDump)
			}));
		}
	}
	
});

//finally a little implementation of a static paginator view
//Basically it is a composite view that shows users 5 at a time
//The bad part of it is that it uses an array to cache all the itemviews
// the first time the page renders 
var R = Marionette.ItemView.extend({
	
	 template: require('../../templates/admin/user_record.hbs'),
	 
	 tagName: "tr"
	
});

module.exports = Marionette.CompositeView.extend({
	
	startIndex : 0,
	
	endIndex : 0,
	
	maxPage:  5,
	
	initStage : true,
	
	itemViewCache: null,
	
	initialize: function(){
		
		this.itemViewCache = [];	
	},
	
	template: require('../../templates/admin/user_mgt.hbs'),
	
	childView: R,
	
	childViewContainer: 'tbody',
	
	ui : {
		
		page : ".admin_users_paginator_button",
		
		filters: ".admin_users_filter_item"

	},
	
	events: {
		'click @ui.page' : "_paginate",
		
		'click @ui.filters' : "_filterAll"
	},
	
	_filterAll: function(e){
		
		e.preventDefault();
		e.stopPropagation();
		
		var target = $(e.target);
		
		//get data-attrib
		var arg = target.attr("data-attrib");
		
		//clear content area
		this.$('tbody').html("");
		
		for(var count=this.startIndex;count<=this.endIndex;count++){
			//console.log(this.collection.models[count].get("user_state"));
			//filter by usesr_state attribute
			if((arg!=="all") && (this.collection.models[count].has("user_state"))){
				//console.log(this.collection.models[count].get("user_state"));
				if(arg === this.collection.models[count].get("user_state")){
					this.$('tbody').append(this.itemViewCache[count].el);
				}
			}
			else if(arg==="all"){
				this.$('tbody').append(this.itemViewCache[count].el);
			}
			
		}
		
	},
	
	_paginate: function(evt){
		
		evt.preventDefault();
		
		evt.stopPropagation();
		
		
		var button = $(evt.target);
		
		//prevent rendering if the limits are reached
		
		
		this.renderAgain(button.attr('data-attrib'));
	},
	
	renderAgain: function(name){
		
		if((this.startIndex==0 && name==="prev") || (this.endIndex==this.collection.length-1 && name==="next")){
			return;
		}
		//remove any content from view
		this.$('tbody').html("");
		
		//assumes that next is clickable
		// endIndex < n-1
		if(name === "next"){
			
			//set startIndex
			this.startIndex = this.endIndex+1;
			
			var tempEndIndex = this.endIndex + this.maxPage;
			//console.log("calculate tempEndIndex "+tempEndIndex);
			
			if(tempEndIndex <= this.collection.length-1)	this.endIndex=tempEndIndex;
			else	this.endIndex = this.collection.length-1;
			
		}
		else if(name === "prev"){
			
			this.endIndex = this.startIndex-1;
			
			var tempStartIndex = this.startIndex - this.maxPage;
			
			if(tempStartIndex >= 0)		this.startIndex = tempStartIndex;
			else	this.startIndex = 0;
			
			//console.log(this.startIndex+" "+this.endIndex);
		}
		
		for(var count = this.startIndex;count <= this.endIndex;count++){
			
			this.$('tbody').append(this.itemViewCache[count].el);
		}
		
		
			//do some  post redering due to value of indices
			//like disabling the clicking of the links in certain cases
		
		
	},
	
	attachHtml: function(cv,iv, index){
		
		this.itemViewCache.push(iv);
		
		console.log("showing user content "+ this.itemViewCache.length);
		console.log(this.collection.length);
		//last item has just been cached
		if(this.collection.length-1 == index){
			this.initStage = false;
			return;
		}
		
		//limits the content to no greater that maxPage/page
		if(this.initStage && index>=this.maxPage){
			
			return;
		}
		
		//set last index
		if(this.initStage)	this.endIndex = index;
		cv.$('tbody').append(iv.el);
		
		
	}
});