Lokijs sample app

Sample app

(function(global){
	var app = global.app = new Loki();

	Class(Loki.Views, 'ListView').inherits(Loki.View)({
		templateUrl  : 'templates/main.html',
		templateMap  : {
			slug : '#description',
			link : '#more a[href=/link/{:id}]'
		},		
		prototype : {
			init : function(config){
				Loki.View.prototype.init.call(this,config);
				var list = this;

				this.element.delegate('#buttons .open', 'click', function(){
					list.open();
				});

				this.element.delegate('#buttons .close', 'click', function(){
					list.close();
				});				
			},
			open : function(){
				this.element.find('#list').show();
				this.element.find('#buttons .open').hide();
				this.element.find('#buttons .close').show();

				this.dispatch('open',{open : true});
			},
			close : function(){
				this.element.find('#list').hide();
				this.element.find('#buttons .open').show();
				this.element.find('#buttons .close').hide();
				
				this.dispatch('close',{open : false});
			}
		}
	});
	
	app.render(function(){
		this.list = new Loki.Views.ListView({
			name : 'main-list',
			targetElement : "#main",
			data : {
				id 	  :	'3',
				title : 'List View',
				slug  : 'This is the list view',
				list  : ['hello','world']
			}
		});
	});

	app.on('ListView:main-list:open',function(data){
		$('#status').html('List Open');
		console.log('List open',data);
	});
	app.on('ListView:main-list:close',function(data){
		$('#status').html('List Close');
		console.log('List close',data);
	});

	$(document).ready(function(){
		app.run();		
	});
	
})(window);