<!doctype html>
<html>
<head>
<title>Backbone Test</title>
<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript" src="/javascript/underscore.js"></script>
<script type="text/javascript" src="/javascript/backbone.js"></script>
</head>
<body>
<div id="header">header</div>
<div id="main"></div>
<div id="footer">footer</div>
<script type="text/javascript">
/**
* /javascript/application/unlocked.js
*/
var unlocked =
{
//initialization code
initialize: function(options)
{
this.options = _.extend(
{
historyOptions:
{
pushState: true
}
}, options);
Backbone.history.start(this.options.historyOptions);
},
//common methods
loadRemoteTemplates: function(templates, async)
{
var self = this;
if(_(templates).isObject())
{
async = self.defaultValue(async, true);
_(templates).each(function(url, key)
{
$.ajax(
{
url: url,
async: async,
success: function(response)
{
self.loadTemplate(key, response)
}
});
});
}
},
loadTemplate: function(key, template)
{
this.templates[key] = _.template(template);
},
renderTemplate: function(key, context)
{
return this.templates[key](context);
},
defaultValue: function(variable, defaultValue)
{
return (!_(variable).isUndefined()) ? variable : defaultValue;
},
//common members
restUrlPart: '/api/v1',
templates: {},
//modules code
module: function()
{
var modules = {};
return function(name)
{
if(modules[name])
{
return modules[name];
}
return modules[name] = {
views: {},
models: {},
collections: {},
routes: {}
};
};
}()
};
/**
* /javascript/application/modules/core.js
*/
(function($)
{
var core = unlocked.module('core');
//add routes
core.routes.standard = Backbone.Router.extend(
{
routes:
{
"": "home",
"/": "home",
"pageTwo": "pageTwo"
},
home: function()
{
new core.views.helloWorld();
},
pageTwo: function()
{
new core.views.buttonTwo();
}
});
//add models
//add collections
//add views
core.views.helloWorld = Backbone.View.extend(
{
el: $('#main'),
events:
{
'click #one': 'buttonOne',
'click #two': 'buttonTwo'
},
initialize: function()
{
_.bindAll(this, 'render');
this.render();
},
render: function()
{
var context = {hello: 'Ryan'};
var html = unlocked.renderTemplate('core.helloWorld', context);
this.$el.empty().html(html);
return this;
},
buttonOne: function()
{
console.log('one');
},
buttonTwo: function()
{
var view = new core.views.buttonTwo();
}
});
core.views.buttonTwo = Backbone.View.extend(
{
el: $('#main'),
initialize: function()
{
_.bindAll(this, 'render');
this.render();
},
render: function()
{
var html = unlocked.renderTemplate('core.buttonTwo');
this.$el.empty().html(html);
return this;
}
});
})(jQuery);
/**
* /javascript/application/application.js
*/
(function($)
{
//all javascript should be properly loaded now
$(document).ready(function()
{
var templates =
{
"core.helloWorld": '/javascript/application/templates/helloWorld.us',
"core.buttonTwo": '/javascript/application/templates/buttonTwo.us'
};
unlocked.loadRemoteTemplates(templates, false);
unlocked.initialize();
});
})(jQuery);
</script>
</body>
</html>