denzuko/README

## 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. ***

## 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>

## 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();
  }
);

## post.css
#post {
  background: lime;
  padding: 1%;
  width: 50%;
  font-family: verdana, arial;
}
#post-title {
  font-weight: bolder;
}

## 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;

});

## 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>

## 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;

});

## 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
  };
});

## 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