nblenke/Backbone Single Page

## Backbone Single Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<head>
<title>Backbone</title>
</head>
<body>

<header></header>
<main></main>
<footer></footer>

<!-- templates -->
<script id="tmpl-header" type="x-jquery-tmpl">
    <a href="#!/">Home</a> | <a href="#!/test/">Test</a>
</script>

<script id="tmpl-home" type="x-jquery-tmpl">
    <p>Home</p>
    <p><%= Hello %></p>
</script>

<script id="tmpl-test" type="x-jquery-tmpl">
    <p>Test</p>
    <p><%= Message %></p>
    <p><a href="" id="foo">click me</a></p>
</script>

<script id="tmpl-footer" type="x-jquery-tmpl">
    <p>&copy;<%= CopyrightYear %></p>
</script>

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.3.0/lodash.underscore.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>

<script type="text/javascript">
/* app */
window.app = {
    preRoute: function (el) {
        el.unbind().empty();
    }
}

/* models */
TestModel = function (callback) {
    var model = new Backbone.Model();
    model.set({ resultset: { Message: 'This is a test.' } });
    callback(model);
    return model;
};

/* views */
HeaderView = Backbone.View.extend({
    el: $('header'),
    initialize: function () {
        this.render();
    },
    render: function () {
        $(this.$el).html(_.template($("#tmpl-header").html(), {} ));
    }
});

FooterView = Backbone.View.extend({
    el: $('footer'),
    initialize: function () {
        this.render();
    },
    render: function () {
        var date = new Date(),
            year = date.getFullYear();
        $(this.$el).html(_.template($("#tmpl-footer").html(), {
            CopyrightYear: year
        }));
    }
});

HomeView = Backbone.View.extend({
    el: '#swipe',
	initialize: function(){
        this.render({
            Hello: "Hello There!"
        });
    },
    render: function (model) {
        $(this.$el).html(_.template($("#tmpl-home").html(), model ));
    }
});

TestView = Backbone.View.extend({
    initialize: function() {
        var _this = this;
        TestModel(function (model) {
            _this.render(model.get('resultset'));
        });
    },
    render: function (model) {
        $(this.$el).html(_.template($("#tmpl-test").html(), model ));
    },
    events: {
        'click #foo': 'foo'
    },
    foo: function (event) {
        event.preventDefault();
        alert('bar');
    }
});

/* router */
app.router = Backbone.Router.extend({
    el : $('main'),
    routes: {
        '': 'home',
        '!/': 'home',
        '!/test/': 'test'
    },
    initialize: function () {
        Backbone.history.start();
        new HeaderView();
        new FooterView();
    },
    home: function () {
        app.preRoute(this.el);
        new HomeView({ el: this.el });
    },
    test: function () {
        app.preRoute(this.el);
        new TestView({ el: this.el });
    }
});

$(function () {
    app.router = new app.router();
});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<head>
	<title>Backbone</title>
	</head>
	<body>

	<header></header>
	<main></main>
	<footer></footer>

	<!-- templates -->
	<script id="tmpl-header" type="x-jquery-tmpl">
	<a href="#!/">Home</a> \| <a href="#!/test/">Test</a>
	</script>

	<script id="tmpl-home" type="x-jquery-tmpl">
	<p>Home</p>
	<p><%= Hello %></p>
	</script>

	<script id="tmpl-test" type="x-jquery-tmpl">
	<p>Test</p>
	<p><%= Message %></p>
	<p><a href="" id="foo">click me</a></p>
	</script>

	<script id="tmpl-footer" type="x-jquery-tmpl">
	<p>©<%= CopyrightYear %></p>
	</script>

	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.3.0/lodash.underscore.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>

	<script type="text/javascript">
	/* app */
	window.app = {
	preRoute: function (el) {
	el.unbind().empty();
	}
	}

	/* models */
	TestModel = function (callback) {
	var model = new Backbone.Model();
	model.set({ resultset: { Message: 'This is a test.' } });
	callback(model);
	return model;
	};

	/* views */
	HeaderView = Backbone.View.extend({
	el: $('header'),
	initialize: function () {
	this.render();
	},
	render: function () {
	$(this.$el).html(_.template($("#tmpl-header").html(), {} ));
	}
	});

	FooterView = Backbone.View.extend({
	el: $('footer'),
	initialize: function () {
	this.render();
	},
	render: function () {
	var date = new Date(),
	year = date.getFullYear();
	$(this.$el).html(_.template($("#tmpl-footer").html(), {
	CopyrightYear: year
	}));
	}
	});

	HomeView = Backbone.View.extend({
	el: '#swipe',
	initialize: function(){
	this.render({
	Hello: "Hello There!"
	});
	},
	render: function (model) {
	$(this.$el).html(_.template($("#tmpl-home").html(), model ));
	}
	});

	TestView = Backbone.View.extend({
	initialize: function() {
	var _this = this;
	TestModel(function (model) {
	_this.render(model.get('resultset'));
	});
	},
	render: function (model) {
	$(this.$el).html(_.template($("#tmpl-test").html(), model ));
	},
	events: {
	'click #foo': 'foo'
	},
	foo: function (event) {
	event.preventDefault();
	alert('bar');
	}
	});

	/* router */
	app.router = Backbone.Router.extend({
	el : $('main'),
	routes: {
	'': 'home',
	'!/': 'home',
	'!/test/': 'test'
	},
	initialize: function () {
	Backbone.history.start();
	new HeaderView();
	new FooterView();
	},
	home: function () {
	app.preRoute(this.el);
	new HomeView({ el: this.el });
	},
	test: function () {
	app.preRoute(this.el);
	new TestView({ el: this.el });
	}
	});

	$(function () {
	app.router = new app.router();
	});
	</script>
	</body>
	</html>