modalbox

home.js

// Filename: home.js

define(['jquery','underscore','backbone', 'text!tpl/home.html', 'text!tpl/start.html'],
	function($, _, Backbone, homeTpl, startTpl) {

		var HomeView = Backbone.View.extend({
			el: 'body',
			special: true,
			events: {
				'click a.special': 'special',
			},
			initialize: function() {
				this.$el.html(_.template(homeTpl));

				this.setElement('#doom');
				this.modal = new Modal({el:this.el});
			},
			render: function() {
				//this.$el.css({background: '#000', color:'#222'});
			},
			special: function(e) {
				e.preventDefault();

				if(this.special) {
					this.modal.show();
					this.special = false;
				} else {
					this.modal.hide();
					this.special = true;
				}
				
			}
			
		});

		var Modal = Backbone.View.extend({
			initialize: function() {
				this.render();
			},
			render: function() {
				this.$el.append('<div class="modal_box"><h1>MODAL</h1></div>');
		        this.setElement('div.modal_box');
		        this.$el.hide();
			},
		    show: function() {
		        this.$el.show();
		    },
		    hide: function() {
		    	this.$el.hide();
		    }
		});

		return HomeView;

	}
);