Skip to content

Instantly share code, notes, and snippets.

@nblenke

nblenke/Backbone Single Page

Last active December 24, 2015 12:29
Show Gist options
  • Save nblenke/6798374 to your computer and use it in GitHub Desktop.
Save nblenke/6798374 to your computer and use it in GitHub Desktop.
Download ZIP
A one page Backbone starter application template
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment