Skip to content

Instantly share code, notes, and snippets.

@artiee
Created Sep 24, 2012
Embed
What would you like to do?
Test setup for requirejs, backbone, underscore, handlebars...
Create the structure above and download the required libraries
*** You must run this on server (e.g. on a local Apache or Node.js) because RequireJS's text-plugin won't be able to fetch the required handlebar-templates due to browser-security. ***
<html>
<head>
<script data-main="js/main.js" src="js/lib/require.js"></script>
</head>
<body>
<div id="main">
<h1>BlogView</h1>
</div>
<div id="post">
post-content comes here from postTemplate
</div>
</body>
</html>
/*
* Initialize the application by loading the required modules
* Note: for Handlebars.js use https://github.com/SlexAxton/require-handlebars-plugin
*/
requirejs.config({
baseUrl: 'js',
paths: {
"i18nprecompile": "lib/i18nprecompile",
"json2": "lib/json2",
"handlebars": "lib/handlebars",
"underscore": "lib/underscore",
"backbone": "lib/backbone",
"jquery": "lib/jquery",
"template-post": "lib/text!../../template/postTemplate.hbs"
},
shim: {
'lib/jquery': {
exports: '$'
},
'lib/backbone': {
//These script dependencies should be loaded before loading backbone.js
deps: ['lib/underscore', 'lib/jquery'],
//Once loaded, use the global 'Backbone' as the module value.
exports: 'Backbone'
},
'lib/underscore': {
exports: '_' // global value for underscore
}
}
});
// Start the main app logic.
requirejs(['router/router'],
function(Router) {
Router.initialize();
}
);
#post {
background: lime;
padding: 1%;
width: 50%;
font-family: verdana, arial;
}
#post-title {
font-weight: bolder;
}
define(['lib/backbone'], function (Backbone) {
var postModel = Backbone.Model.extend({
defaults: {
title: 'unnamed',
content: 'empty',
postUrl: 'n/a'
},
initialize: function(){
this.on('change:title', function(){console.log('title changed!')});
}
});
return postModel;
});
<div id="post-template" type="text/x-handlebars-template">
<div id="post-title">Title: {{title}}</div>
<div id="post-content">Content: {{content}}</div>
</div>
define(['lib/handlebars',
'lib/backbone',
'lib/text!../../template/postTemplate.hbs'],
function (Handlebars, Backbone, PostTemplateSource) {
var postView = Backbone.View.extend({
el: $('#post'),
initialize: function(){
_.bindAll(this, 'render');
this.model.on('change', this.render);
this.render();
},
render: function(event){
var postTemplate = Handlebars.compile(PostTemplateSource);
this.$el.html(postTemplate(this.model.toJSON()));
return this;
}
});
return postView;
});
define([
'lib/jquery',
'lib/underscore',
'lib/backbone',
'view/postView',
'model/post',
'lib/text!../../data/posts.json'],
function($, _, Backbone, PostView, Post, PostAsJSON){
var AppRouter = Backbone.Router.extend({
routes: {
// Define some URL routes
'post/:id': 'renderPost',
// Default
'*actions': 'defaultAction'
},
renderPost: function(postId){
console.log('post id: ' + postId);
var postJSON = eval('(' + PostAsJSON + ')');
var testPost = new Post(postJSON[postId - 1]);
new PostView({model: testPost});
},
defaultAction: function(actions){
// no matching route
console.log('No route:', actions + '. Try to navigate to /#post/1');
}
});
var initialize = function(){
var app_router = new AppRouter;
Backbone.history.start();
};
return {
initialize: initialize
};
});
./
index.html
./js
|
main.js
./js/lib
|
jquery.js
require.js
backbone.js
underscore.js
handlebars.js (one that supports AMD from https://github.com/SlexAxton/require-handlebars-plugin/blob/master/Handlebars.js)
text.js (requirejs -plugin to load text-resources using XHR)
.js/model
|
post.js
.js/view
|
postView.js
.js/router
|
router.js
./template
|
postTemplate.hbs
./data
|
posts.json
./css
|
post.css
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment