diff options
| -rw-r--r-- | _layouts/default.html | 7 | ||||
| -rw-r--r-- | _posts/2011-01-26-what-is-a-collection.md | 15 | ||||
| -rw-r--r-- | _posts/2011-01-29-what-is-a-model.md | 4 | ||||
| -rw-r--r-- | _posts/2011-10-10-organizing-backbone-using-modules.md | 2 | ||||
| -rw-r--r-- | examples/modular-backbone/js/router.js | 12 | ||||
| -rw-r--r-- | index.html | 47 |
6 files changed, 63 insertions, 24 deletions
diff --git a/_layouts/default.html b/_layouts/default.html index fe33a81..3be70e5 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -11,7 +11,7 @@ <!-- syntax highlighting CSS --> <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - + <link rel="stylesheet" href="http://cdn.moot.it/1.1/moot.css"/> <!-- Homepage CSS --> <link rel="stylesheet" href="/css/bootstrap.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> @@ -33,6 +33,11 @@ })(); /* ]]> */ </script> + <!-- (1) Moot depends on jQuery v1.7 or greater --> + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> + + <!-- (1) Moot client application --> + <script src="http://cdn.moot.it/1.1/moot.min.js"></script> </head> <body> diff --git a/_posts/2011-01-26-what-is-a-collection.md b/_posts/2011-01-26-what-is-a-collection.md index 639cde8..c812ca5 100644 --- a/_posts/2011-01-26-what-is-a-collection.md +++ b/_posts/2011-01-26-what-is-a-collection.md @@ -9,9 +9,9 @@ posturl: http://backbonetutorials.com/what-is-a-collection Backbone collections are simply an ordered set of [models](/what-is-a-model). Such that it can be used in situations such as; -* Model: Student, Collection: ClassStudents +* Model: Student, Collection: ClassStudents * Model: Todo Item, Collection: Todo List -* Model: Animals, Collection: Zoo +* Model: Animal, Collection: Zoo Typically your collection will only use one type of model but models themselves are not limited to a type of collection; @@ -28,9 +28,10 @@ Here is a generic Model/Collection example. console.log("Music is the answer"); } }); - + var Album = Backbone.Collection.extend({ model: Song + }); {% endhighlight %} @@ -49,16 +50,16 @@ Now we are going to populate a collection with some useful data. console.log("Music is the answer"); } }); - + var Album = Backbone.Collection.extend({ model: Song }); - + var song1 = new Song({ name: "How Bizarre", artist: "OMC" }); var song2 = new Song({ name: "Sexual Healing", artist: "Marvin Gaye" }); var song3 = new Song({ name: "Talk It Over In Bed", artist: "OMC" }); - + var myAlbum = new Album([ song1, song2, song3]); console.log( myAlbum.models ); // [song1, song2, song3] - + {% endhighlight %} diff --git a/_posts/2011-01-29-what-is-a-model.md b/_posts/2011-01-29-what-is-a-model.md index 560fa57..d6eac75 100644 --- a/_posts/2011-01-29-what-is-a-model.md +++ b/_posts/2011-01-29-what-is-a-model.md @@ -165,7 +165,7 @@ Our model definition shall thus look like; ### Creating a new model -If we wish to create a new user on the server then we will instantiate a new UserModel and call `save`. If the `id` attribute of the model is `null`, Backbone.js will send of POST request to the server to the urlRoot. +If we wish to create a new user on the server then we will instantiate a new UserModel and call `save`. If the `id` attribute of the model is `null`, Backbone.js will send a POST request to the urlRoot of the server. {% highlight javascript %} var UserModel = Backbone.Model.extend({ @@ -219,7 +219,7 @@ If we instantiate a model with an `id`, Backbone.js will automatically perform a ### Updating a model -Now that we model that exist on the server we can perform an update using a PUT request. +Now that we have a model that exist on the server we can perform an update using a PUT request. We will use the `save` api call which is intelligent and will send a PUT request instead of a POST request if an `id` is present(conforming to RESTful conventions) {% highlight javascript %} diff --git a/_posts/2011-10-10-organizing-backbone-using-modules.md b/_posts/2011-10-10-organizing-backbone-using-modules.md index 5b22597..4b829f9 100644 --- a/_posts/2011-10-10-organizing-backbone-using-modules.md +++ b/_posts/2011-10-10-organizing-backbone-using-modules.md @@ -354,7 +354,7 @@ define([ 'backbone', // Pull in the Collection module from above 'collections/projects', - 'text!templates/projects/list + 'text!templates/projects/list.html' ], function($, _, Backbone, ProjectsCollection, projectsListTemplate){ var ProjectListView = Backbone.View.extend({ el: $("#container"), diff --git a/examples/modular-backbone/js/router.js b/examples/modular-backbone/js/router.js index 5621f2f..032d602 100644 --- a/examples/modular-backbone/js/router.js +++ b/examples/modular-backbone/js/router.js @@ -44,14 +44,14 @@ define([ // We have no matching route, lets display the home page var homeView = new HomeView(); homeView.render(); - - // unlike the above, we don't call render on this view - // as it will handle the render call internally after it - // loads data - var footerView = new FooterView(); - }); + // Unlike the above, we don't call render on this view as it will handle + // the render call internally after it loads data. Further more we load it + // outside of an on-route function to have it loaded no matter which page is + // loaded initially. + var footerView = new FooterView(); + Backbone.history.start(); }; return { @@ -35,21 +35,54 @@ title: <h2>Backbone Boilerplate</h2> <ul class="tutorials"> <li><a href="http://backboneboilerplate.com">Backbone Boilerplate - Using require.js with build system</a></li> + <li><a target="_blank" href="http://thomasdavis.github.com/2011/02/01/backbone-introduction.html">Backbone.js Tutorial – by noob for noobs</a></li> </ul> <h2>Demo apps!</h2> <ul class="tutorials"> +<li><a href="http://www.clevertim.com">Clevertim CRM - A real life example of implementing a simple CRM with backbone.js (check the Quick Demo)</a></li> <li><a href="http://www.earbits.com">Earbits.com - Music streaming website built with Backbone.js - Great for programmers who listen to music when coding</a></li> -<li><a href="http://thomasdavis.github.com/kalei/">Kalei - A living CSS styleguide - Built with Backbone.js using these principles</a></li> +<li><a href="http://kaleistyleguide.com/">Kalei - A living CSS styleguide - Built with Backbone.js using these principles</a></li> <li><a href="http://apiengine.io">ApiEngine.io</a> (Beta) - Collaborativly build RESTful API's with automated testing and client mocking.</li> <li><a href="https://github.com/alessioalex/ClientManager" alt="Sample application built with Backbone, RequireJS, Twitter Bootstrap on the client and Node.js (Express.js, Mongoose) on the server.">ClientManager</a> - Sample application built with Backbone, RequireJS, Twitter Bootstrap on the client and Node.js (Express.js, Mongoose) on the server.</li> <li><a href="http://antoviaque.org/docs/tutorials/backbone-relational-tutorial/">Backbone-relational Tutorial</a> - Nested Models With Backbone.js</li> </ul> +<h2>Forum</h2> -<h2>External Tutorials</h2> -<ul class="tutorials"> - <li><a target="_blank" href="http://thomasdavis.github.com/2011/02/01/backbone-introduction.html">Backbone.js Tutorial – by noob for noobs</a></li> - <li><a target="_blank" href="http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules">Organizing Your Backbone.js Application with Modules</a></li> - <li><a target="_blank" href="http://developer.teradata.com/blog/jasonstrimpel/2011/11/backbone-js-and-socket-io">Backbone.js and socket.io</a></li> -</ul> + <!-- (2) Placeholder for the forum. The forum will be rendered inside this element --> + <a class="moot" href="http://api.moot.it/backbonetutorials"></a> + + <!-- + (2) Example tag for commenting, put it on a different page + <a class="moot" href="http://api.moot.it/backbonetutorials/blog#my-blog-entry"></a> + + (2) Example tag for threaded commenting + <a class="moot" href="http://api.moot.it/backbonetutorials/blog/my-large-blog-entry"></a> + + Moot paths are awesome: http://moot.it/docs/?backbonetutorials#path + --> + +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br />
\ No newline at end of file |