This example is buggy now.

Use page `posts/del/:id` as example.
If you go to the page directly (copy and paste the url to the browser),
the server side-syncer would be triggered.
On the other hand, if you click through the page, then the client-side syncer would be triggered.
The bugs are aucsed by the difference between the syncers:
1. The `:id` param could be got by `req.param('id')` when triggering server-side syncer.
   But when triggering client-side syncer, `req.param('id')` returns nothing.
2. If triggering client-side syncer, then calling `getTemplateDate` of the view would return the result from the syncer.
   But it returns undefined when using server-side syncer.

Author: trantorLiu

Gruntfile.js

@@ -0,0 +1,115 @@
+var path = require('path');
+
+var stylesheetsDir = 'assets/stylesheets';
+var rendrDir = 'node_modules/rendr';
+var rendrModulesDir = rendrDir + '/node_modules';
+
+module.exports = function(grunt) {
+  // Project configuration.
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+
+    bgShell: {
+      runNode: {
+        cmd: './node_modules/nodemon/nodemon.js index.js',
+        bg: true
+      }
+    },
+
+    stylus: {
+      compile: {
+        options: {
+          paths: [stylesheetsDir],
+          'include css': true
+        },
+        files: {
+          'public/styles.css': stylesheetsDir + '/index.styl'
+        }
+      }
+    },
+
+    handlebars: {
+      compile: {
+        options: {
+          namespace: false,
+          commonjs: true,
+          processName: function(filename) {
+            return filename.replace('app/templates/', '').replace('.hbs', '');
+          }
+        },
+        src: "app/templates/*.hbs",
+        dest: "app/templates/compiledTemplates.js",
+        filter: function(filepath) {
+          var filename = path.basename(filepath);
+          // Exclude files that begin with '__' from being sent to the client,
+          // i.e. __layout.hbs.
+          return filename.slice(0, 2) !== '__';
+        }
+      }
+    },
+
+    watch: {
+      scripts: {
+        files: 'app/**/*.js',
+        tasks: ['rendr_stitch'],
+        options: {
+          interrupt: true
+        }
+      },
+      templates: {
+        files: 'app/**/*.hbs',
+        tasks: ['handlebars'],
+        options: {
+          interrupt: true
+        }
+      },
+      stylesheets: {
+        files: stylesheetsDir + '/**/*.styl',
+        tasks: ['stylus'],
+        options: {
+          interrupt: true
+        }
+      }
+    },
+
+    rendr_stitch: {
+      compile: {
+        options: {
+          dependencies: [
+            rendrDir + '/assets/vendor/**/*.js',
+            'assets/vendor/**/*.js',
+            rendrModulesDir + '/underscore/underscore.js',
+            rendrModulesDir + '/backbone/backbone.js',
+            rendrModulesDir + '/async/lib/async.js'
+          ],
+          aliases: [
+            {from: rendrDir + '/client', to: 'rendr/client'},
+            {from: rendrDir + '/shared', to: 'rendr/shared'}
+          ]
+        },
+        files: [{
+          dest: 'public/mergedAssets.js',
+          src: [
+            'app/**/*.js',
+            rendrDir + '/client/**/*.coffee',
+            rendrDir + '/shared/**/*.coffee'
+          ]
+        }]
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-stylus');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-handlebars');
+  grunt.loadNpmTasks('grunt-bg-shell');
+  grunt.loadNpmTasks('grunt-rendr-stitch');
+
+  grunt.registerTask('compile', ['handlebars', 'rendr_stitch', 'stylus']);
+
+  // Run the server and watch for file changes
+  grunt.registerTask('server', ['bgShell:runNode', 'compile', 'watch']);
+
+  // Default task(s).
+  grunt.registerTask('default', ['compile']);
+};

app/app.js

@@ -0,0 +1,18 @@
+var BaseApp = require('rendr/shared/app');
+
+module.exports = BaseApp.extend({
+  defaults: {
+    loading: false
+  },
+
+  // @client
+  start: function() {
+    // Show a loading indicator when the app is fetching.
+    this.router.on('action:start', function() { this.set({loading: true});  }, this);
+    this.router.on('action:end',   function() { this.set({loading: false}); }, this);
+
+    // Call 'super'.
+    BaseApp.prototype.start.call(this);
+  }
+
+});

app/collections/base.js

@@ -0,0 +1,3 @@
+var RendrBase = require('rendr/shared/base/collection');
+
+module.exports = RendrBase.extend({});

app/collections/posts.js

@@ -0,0 +1,10 @@
+var Post = require('../models/post')
+  , Base = require('./base');
+
+module.exports = Base.extend({
+  model: Post,
+  url: function() {
+    return '/posts';
+  }
+});
+module.exports.id = 'Posts';

app/controllers/posts_controller.js

@@ -0,0 +1,42 @@
+module.exports = {
+  index: function(params, callback) {
+    var spec = {
+      collection: {collection: 'posts', params: params}
+    };
+    this.app.fetch(spec, function(err, result) {
+      callback(err, 'posts_index_view', result);
+    });
+  },
+
+  add: function(params, callback) {
+    callback(null, 'posts_add_view');
+  },
+
+  show: function(params, callback) {
+    var spec = {
+      model: {model: 'post', params: params, ensureKeys: ['title']}
+    };
+    this.app.fetch(spec, function(err, result) {
+      console.log(result, 2222);
+      callback(err, 'posts_show_view', result);
+    });
+  },
+
+  edit: function(params, callback) {
+    var spec = {
+      model: {model: 'post', params: params, ensureKeys: ['title']}
+    };
+    this.app.fetch(spec, function(err, result) {
+      callback(err, 'posts_show_view', result);
+    });
+  },
+
+  del: function(params, callback) {
+    var spec = {
+      model: {model: 'post', params: params, ensureKeys: ['title']}
+    };
+    this.app.fetch(spec, function(err, result) {
+      callback(err, 'posts_del_view', result);
+    });
+  }
+};

app/models/base.js

@@ -0,0 +1,3 @@
+var RendrBase = require('rendr/shared/base/model');
+
+module.exports = RendrBase.extend({});

app/models/post.js

@@ -0,0 +1,7 @@
+var Base = require('./base');
+
+module.exports = Base.extend({
+  url: '/posts/:id',
+  idAttribute: 'id'
+});
+module.exports.id = 'Post';

app/router.js

@@ -0,0 +1,17 @@
+var BaseClientRouter = require('rendr/client/router');
+
+var Router = module.exports = function Router(options) {
+  BaseClientRouter.call(this, options);
+};
+
+Router.prototype.__proto__ = BaseClientRouter.prototype;
+
+Router.prototype.postInitialize = function() {
+  this.on('action:start', this.trackImpression, this);
+};
+
+Router.prototype.trackImpression = function() {
+  if (window._gaq) {
+    _gaq.push(['_trackPageview']);
+  }
+};

app/routes.js

@@ -0,0 +1,8 @@
+module.exports = function(match) {
+  match(''               , 'posts#index');
+  match('posts'          , 'posts#index');
+  match('posts/edit'     , 'posts#add');
+  match('posts/edit/:id' , 'posts#edit');
+  match('posts/del/:id'  , 'posts#del');
+  match('posts/:id'      , 'posts#show');
+};

app/templates/__layout.hbs

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+
+  <head>
+    <meta charset='utf-8'/>
+    <title>Rendr Example Blog</title>
+
+    <link href="/styles.css" media="screen" rel="stylesheet" type="text/css" />
+  </head>
+
+  <body class="">
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="/">Rendr Example Blog</a>
+          <div class="nav-collapse collapse">
+            <ul class="nav">
+              <li class="active"><a href="/">Home</a></li>
+            </ul>
+          </div>
+          <div class="loading-indicator">Loading&hellip;</div>
+        </div>
+      </div>
+    </div>
+
+    <section id=content class=container>
+      {{{body}}}
+    </section>
+
+    <script src="/mergedAssets.js"></script>
+    <script>
+    (function() {
+      var App = window.App = new (require('app/app'))({{json appData}});
+      App.bootstrapData({{json bootstrappedData}});
+      App.start();
+    })();
+    </script>
+
+  </body>
+
+</html>

app/templates/compiledTemplates.js

@@ -0,0 +1,109 @@
+module.exports = function(Handlebars) {
+
+var templates = {};
+
+templates["posts_add_view"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+  this.compilerInfo = [2,'>= 1.0.0-rc.3'];
+helpers = helpers || Handlebars.helpers; data = data || {};
+  
+
+
+  return "<form class=\"form-horizontal\">\n  <legend>New Post</legend>\n  <div class=\"control-group\">\n    <label class=\"control-label\" for=\"title\">Email</label>\n    <div class=\"controls\">\n      <input type=\"text\" id=\"title\" placeholder=\"Title\">\n    </div>\n  </div>\n  <div class=\"control-group\">\n    <label class=\"control-label\" for=\"body\">Password</label>\n    <div class=\"controls\">\n      <textarea type=\"password\" id=\"body\" placeholder=\"Body\"></textarea>\n    </div>\n  </div>\n  <div class=\"form-actions\">\n    <button type=\"submit\" class=\"btn btn-primary\">Save post</button>\n    <a href=\"/posts\" type=\"button\" class=\"btn\">Cancel</a>\n  </div>\n</form>\n";
+  });
+
+templates["posts_del_view"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+  this.compilerInfo = [2,'>= 1.0.0-rc.3'];
+helpers = helpers || Handlebars.helpers; data = data || {};
+  var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression;
+
+
+  buffer += "<p>Sure to delete?</p>\n<div>\n<button class=\"btn btn-danger del\">Delete it!</button>\n<a href=\"/posts/";
+  if (stack1 = helpers.id) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
+  else { stack1 = depth0.id; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
+  buffer += escapeExpression(stack1)
+    + "\" class=\"btn\">Cancel</a>\n</div>\n";
+  return buffer;
+  });
+
+templates["posts_edit_view"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+  this.compilerInfo = [2,'>= 1.0.0-rc.3'];
+helpers = helpers || Handlebars.helpers; data = data || {};
+  var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression;
+
+
+  buffer += "<a class=\"btn\" href=\"/posts/edit\">Create a post</a>\n\n<br>\n<h3>Stats</h3>\n<div class=\"row-fluid\">\n  <div class=\"span6\">\n    <table class=\"table\">\n      <tr>\n        <th>Description</th>\n        <td>";
+  if (stack1 = helpers.description) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
+  else { stack1 = depth0.description; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
+  buffer += escapeExpression(stack1)
+    + "</td>\n      </tr>\n      <tr>\n        <th>Language</th>\n        <td>";
+  if (stack1 = helpers.language) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
+  else { stack1 = depth0.language; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
+  buffer += escapeExpression(stack1)
+    + "</td>\n      </tr>\n      <tr>\n        <th>Watchers</th>\n        <td>";
+  if (stack1 = helpers.watchers_count) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
+  else { stack1 = depth0.watchers_count; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
+  buffer += escapeExpression(stack1)
+    + "</td>\n      </tr>\n      <tr>\n        <th>Forks</th>\n        <td>";
+  if (stack1 = helpers.forks_count) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
+  else { stack1 = depth0.forks_count; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
+  buffer += escapeExpression(stack1)
+    + "</td>\n      </tr>\n      <tr>\n        <th>Open Issues</th>\n        <td>";
+  if (stack1 = helpers.open_issues_count) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
+  else { stack1 = depth0.open_issues_count; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
+  buffer += escapeExpression(stack1)
+    + "</td>\n      </tr>\n    </table>\n  </div>\n</div>\n";
+  return buffer;
+  });
+
+templates["posts_index_view"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+  this.compilerInfo = [2,'>= 1.0.0-rc.3'];
+helpers = helpers || Handlebars.helpers; data = data || {};
+  var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression, self=this;
+
+function program1(depth0,data) {
+  
+  var buffer = "", stack1;
+  buffer += "\n    <li>\n      <a href=\"/posts/";
+  if (stack1 = helpers.id) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
+  else { stack1 = depth0.id; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
+  buffer += escapeExpression(stack1)
+    + "\">";
+  if (stack1 = helpers.title) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
+  else { stack1 = depth0.title; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
+  buffer += escapeExpression(stack1)
+    + "</a>\n    </li>\n  ";
+  return buffer;
+  }
+
+  buffer += "<h3>Posts</h3>\n\n<div class=\"well\">\n  <ul>\n  ";
+  stack1 = helpers.each.call(depth0, depth0.models, {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += "\n  </ul>\n</div>\n\n<a class=\"btn\" href=\"/posts/edit\">New post</a>\n";
+  return buffer;
+  });
+
+templates["posts_show_view"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+  this.compilerInfo = [2,'>= 1.0.0-rc.3'];
+helpers = helpers || Handlebars.helpers; data = data || {};
+  var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression;
+
+
+  buffer += "<div class=\"well\">\n  <h3>";
+  if (stack1 = helpers.title) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
+  else { stack1 = depth0.title; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
+  buffer += escapeExpression(stack1)
+    + "</h3>\n  <p>";
+  if (stack1 = helpers.body) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
+  else { stack1 = depth0.body; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
+  buffer += escapeExpression(stack1)
+    + "</p>\n</div>\n<div class=\"well\">\n  <a href=\"/posts\" class=\"btn btn-primary\">Back to posts</a>\n  <a href=\"/posts/del/";
+  if (stack1 = helpers.id) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
+  else { stack1 = depth0.id; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
+  buffer += escapeExpression(stack1)
+    + "\" class=\"btn btn-danger del\">Delete</a>\n</div>\n";
+  return buffer;
+  });
+
+return templates;
+
+};