artiee · September 24, 2012 20:45
diff --git a/README b/README
 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. ***
diff --git a/index.html b/index.html
 <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>
diff --git a/main.js b/main.js
 /*
 * 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();
  }
 );
diff --git a/post.css b/post.css
 #post {
  background: lime;
  padding: 1%;
  width: 50%;
  font-family: verdana, arial;
 }
 #post-title {
  font-weight: bolder;
 }
diff --git a/post.js b/post.js
 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;

 });
diff --git a/postTemplate.hbs b/postTemplate.hbs
 <div id="post-template" type="text/x-handlebars-template">
  <div id="post-title">Title: {{title}}</div>
  <div id="post-content">Content: {{content}}</div>
 </div>
diff --git a/postView.js b/postView.js
 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;

 });
diff --git a/router.js b/router.js
 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
  };
 });
diff --git a/structure b/structure
 ./
 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
	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