Add more comments

README.md

@@ -9,9 +9,11 @@ take it too seriously.
 
 Greatly inspired from [DocumentCloud sources](https://github.com/documentcloud/documentcloud/tree/master/public/javascripts) and [HTML5 BoilerPlate](http://html5boilerplate.com/)
 
+
 ### Clone
 
-git clone https://Filirom1@github.com/Filirom1/Backbonist.git .
+    git clone https://Filirom1@github.com/Filirom1/Backbonist.git .
+
 
 ### Choose your namespace
 
@@ -21,16 +23,95 @@ You can change it on Linux and Unix with a `sed` command:
     cd Backbonist
     find . -exec sed -i "s/xx/YOUR-NAMESPACE-HERE/g" {} \;
 
+
+### Create your template
+
+You want to create a web application, the first thing you need to do is
+an HTML.
+
+This takes place in the template folder.
+
+Create an HTLM file with the `.jst` extension.
+If you want to do some templating, choose a template compiler that is working with
+JST :
+
+* Handlebars : <https://github.com/wookiehangover/handlebars-jst>
+* jQuery Tmpl, Handlebars, Underscore or pure string : <https://github.com/Filirom1/universal-jst>
+
+But what is JST ?
+
+JST means JavaScript Template, JST compile all your HTML into a
+JavaScript file. Then you will be able to access your compiled templates
+using the JST namespace :
+
+    JST["your-template-name"]({name: "toto", age: "23", color: "red"});
+
+Take a look inside the `template` folder.
+
+
 ### Create your Views
 
-### Create templates
+In Backbone Views are jsut some glue between the HTML template and user
+interaction.
+
+The simplest view in Backbone populate a template inside the `el`
+attribute.
+
+Take a look at the `view` folder.
 
-### Create your Models and Collections
 
 ### Edit your routes
 
+Now that you have several views, you want to do a Single Page Web App
+and make some views appear or disappear.
+
+You will also want some views to be rendered during all the application.
+
+Take a look at the `Router.js` file.
+
+
+### Create your Models and Collections
+
+Communicate between views using the views instances.
+
+TODO
+
+### Create your Models and Collections
+
+It's time to make your aplication dynamic, call some remote JSON
+files then show the result into custom views.
+
+Like you have objects and arrays in JSON, you will have Models and Collections of Models.
+
+For more information about Model and Collections, read the official
+website : <http://documentcloud.github.com/backbone/>
+
+In Backbonist, model and views are available in the `model` folder.
+
+
 ### Create jQuery and Backbone Plugins
 
+To write DRY code you will have to avoid duplication.
+
+That's why it's a good idea to extend jQuery with any function that is
+relative to the DOM.
+
+Look at `lib/jquery.plugin.js`
+
+
+Extend Backbone with any function that is
+relative to Views, Model, Collections, Events, ...
+
+Look at `lib/Backbone.plugin.js`
+
+
 ### Create utils functions
 
+In an application there is always very basic function but very
+usefull: utils functions.
+
+If what you want to do is not in [underscore](http://documentcloud.github.com/underscore/), create your own utilities functions in `lib/util.js`
+
 ### Add tests
+
+TODO

Router.js

@@ -1,3 +1,8 @@
+// The router is a Singleton.
+// It is responsible of displaying your page given an URL.
+//
+// Some views in the application are always rendered.
+// This is the AppViews.
 xx.Router = Backbone.Router.extend({
 
   routes: {
@@ -7,30 +12,31 @@ xx.Router = Backbone.Router.extend({
   },
 
   initialize: function(){
-    this.createSubView();
-    this.renderSubView();
+    this.createAppView();
+    this.renderAppView();
   },
 
   // instantiate views that will be used in the whole application.
-  createSubView: function(){
-    dc.view.todo = new dc.view.Todo();
+  createAppView: function(){
+    xx.view.todo = new xx.view.TodoView();
     // ...
   },
 
-  // insert the application views inside the DOM.
-  renderSubView: function(){
-    $('body').append(dc.view.todo.render().el);
+  // insert into the DOM, views that need to be rendered in the whole
+  // application.
+  renderAppView: function(){
+    $('body').append(xx.view.todo.render().el);
     // ...
   },
 
   // Index page
   home: function() {
-    // ...
+    console.log("Welcome home!");
   },
 
   // Search page
   search: function(query, page) {
-    // ...
+    console.log("You search", query, page);
   }
 
 });

index.html

@@ -44,13 +44,15 @@
   <script src="vendor/log.js"></script>
   <script src="vendor/underscore.js"></script>
   <script src="vendor/backbone.js"></script>
+  <script src="vendor/handlebars.runtime-1.0.0.beta.6.js"></script>
   <script src="application.js"></script>
   <script src="lib/util.js"></script>
   <script src="lib/jquery.plugin.js"></script>
   <script src="lib/Backbone.plugin.js"></script>
   <script src="model/Todo.js"></script>
-  <script src="view/common/Dialog.js"></script>
+  <script src="template/templates.js"></script>
   <script src="view/todo/TodoView.js"></script>
+  <script src="Router.js"></script>
   <!-- end scripts -->
 
   <!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.

model/Todo.js

@@ -11,7 +11,7 @@ xx.model.MyThing = Backbone.Model.extend({
 
 // And your collection like this.
 xx.model.MyThings = Backbone.Collection.extend({
-  model: MyThing
+  model: xx.model.MyThing
 });
 
 // Like for Model, your can use Singleton for your Collections.

template/README.md

@@ -0,0 +1,12 @@
+Call a JST compiler inside this folder.
+
+All your templates will be compiled into a single JS file.
+
+If you use Handlebars template, you can use this JST compiler:
+<https://github.com/wookiehangover/handlebars-jst>
+
+    $ npm install -g handlebars-jst
+
+    $ cd template
+
+    $ tmpl

template/templates.js

@@ -0,0 +1,17 @@
+
+
+(function(){this.JST || (this.JST = {});this.JST["todo"] = function(context) { return HandlebarsTemplates["todo"](context); };this.HandlebarsTemplates || (this.HandlebarsTemplates = {});this.HandlebarsTemplates["todo"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+  helpers = helpers || Handlebars.helpers;
+  var buffer = "", stack1, self=this, functionType="function", helperMissing=helpers.helperMissing, undef=void 0, escapeExpression=this.escapeExpression;
+
+
+  buffer += "<!--\nThis is a handlebars template.\nThis template will be transformed into a function by the handlebars\ncompiler.\n\nYou just have to include the result of the compilation\n`template/templates.js` into the `index.html` to access your templates via\nthe JST namespace.\n\n    JST[\"your-template-name\"]({ name: 'Hello', text: 'You rock !' });\n\nYou can use the following Handlebars JST compiler <https://github.com/wookiehangover/handlebars-jst>\n-->\n\n<h2>";
+  stack1 = helpers.name || depth0.name
+  if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
+  else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "name", { hash: {} }); }
+  buffer += escapeExpression(stack1) + "</h2>\n<p>A custom paragraph here.</p>\n<p>";
+  stack1 = helpers.text || depth0.text
+  if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
+  else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "text", { hash: {} }); }
+  buffer += escapeExpression(stack1) + "</p>\n";
+  return buffer;});}).call(this);

template/todo.jst

@@ -1,2 +1,17 @@
+<!--
+This is a handlebars template.
+This template will be transformed into a function by the handlebars
+compiler.
+
+You just have to include the result of the compilation
+`template/templates.js` into the `index.html` to access your templates via
+the JST namespace.
+
+    JST["your-template-name"]({ name: 'Hello', text: 'You rock !' });
+
+You can use the following Handlebars JST compiler <https://github.com/wookiehangover/handlebars-jst>
+-->
+
 <h2>{{name}}</h2>
 <p>A custom paragraph here.</p>
+<p>{{text}}</p>