Permalink
Browse files

Add more comments

  • Loading branch information...
Filirom1 committed Mar 4, 2012
1 parent b6ce6d4 commit 8f208ee28d4d9b77a8e550a5d791e17836a3374d
Showing with 401 additions and 582 deletions.
  1. +84 −3 README.md
  2. +15 −9 Router.js
  3. +3 −1 index.html
  4. +1 −1 model/Todo.js
  5. +12 −0 template/README.md
  6. +17 −0 template/templates.js
  7. +15 −0 template/todo.jst
  8. +223 −0 vendor/handlebars.runtime-1.0.0.beta.6.js
  9. +0 −487 vendor/json2.js
  10. +8 −0 view/README.md
  11. +0 −77 view/common/Dialog.js
  12. +8 −0 view/common/README.md
  13. +15 −4 view/todo/TodoView.js
View
@@ -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
View
@@ -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);
}
});
View
@@ -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.
View
@@ -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.
View
@@ -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
View
@@ -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);
View
@@ -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>
Oops, something went wrong.

0 comments on commit 8f208ee

Please sign in to comment.