diff --git a/CNAME b/CNAME new file mode 100644 index 00000000..0c9de916 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +backbonetutorials.com diff --git a/README.md b/README.md new file mode 100644 index 00000000..2229aeb4 --- /dev/null +++ b/README.md @@ -0,0 +1,38 @@ + +# Backbone Tutorials + +This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome. +About Backbone Tutorials + +As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial + +I started this site to not only consolidate my understanding of backbone.js but to also document what I have learned thus far for myself and others. + +Thomas Davis - [@neutralthoughts](http://twitter.com/neutralthoughts) - Twitter + +## Contributions + +* Thanks to Cactus([https://github.com/cactus](https://github.com/cactus)) for creating the blog feed + +## About the author + +Looking for feedback on my latest startup Protosal(http://protosal.com) any and all would be great! + +**Contact:** + +* \#cdnjs on freenode +* @neutralthoughts on twitter +* thomasalwyndavis@gmail.com + +**Projects:** + +* Javascript Library CDN - http://cdnjs.com +* Proposal Generation Start up - http://protosal.com +* Backbone.js Tutorials - http://backbonetutorials.com +* Technical Blog - http://thomasdavis.github.com +* Github Account - https://github.com/thomasdavis +* Freelance Blog - http://thomasalwyndavis.com +* Quora - http://www.quora.com/Thomas-Davis +* StackOverflow - http://stackoverflow.com/users/580675/thomas-davis + +Love you mum! diff --git a/_config.yml b/_config.yml new file mode 100644 index 00000000..021f688d --- /dev/null +++ b/_config.yml @@ -0,0 +1,3 @@ +markdown: rdiscount +pygments: true +permalink: /:title diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 00000000..7fea996c --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,104 @@ + + + + + + {{ page.title }} - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+ + + + +
+
+ home + examples + contribute + about + subscribe + chat +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+ {{ content }} + + + +
+ +
+
+ + + + + diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 00000000..0d32463c --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,22 @@ +--- +layout: default +--- +
+{{ content }} +
+ +
+ + + +
+ + + + + + diff --git a/_posts/2011-01-26-what-is-a-collection.textile b/_posts/2011-01-26-what-is-a-collection.textile new file mode 100644 index 00000000..6fdaca59 --- /dev/null +++ b/_posts/2011-01-26-what-is-a-collection.textile @@ -0,0 +1,85 @@ +--- +layout: post +title: What is a collection? +type: beginner +posturl: http://backbonetutorials.com/what-would-you-use-backbone +--- + +h1. In progress + +h2. What is a collection? + +p. 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: Todo Item, Collection: Todo List +* Model: Animals, Collection: Zoo + +Typically your collection will only use one type of model but models themselves are not limited to a type of collection; + +* Model: Student, Collection: Gym Class +* Model: Student, Collection: Art Class +* Model: Student, Collection: English Class + +Here is a generic Model/Collection example. + +{% highlight javascript %} + + var Song = Backbone.Model.extend({ + initialize: function(){ + console.log("Music is the answer"); + } + }); + + var Album = Backbone.Collection.extend({ + model: Song + }); + +{% endhighlight %} + +h3. Building a collection + +p. Now we are going to populate a creation with some useful data. + +{% highlight javascript %} + + var Song = Backbone.Model.extend({ + defaults: { + name: "Not specified", + artist: "Not specified" + }, + initialize: function(){ + 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 %} + +h3. So how does Backbone.js help? + +p. Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to Backbone.js light nature you can incrementally include it in any current or future projects. + + +h3. Relevant Links +* "Backbone.js official website":http://documentcloud.github.com/backbone/ +* "great hackernews discussion /w post from author":http://news.ycombinator.com/item?id=2119704 + + +h3. Author + +* "Thomas Davis":https://github.com/thomasdavis + +h3. Contributors + +* "FND":https://github.com/FND diff --git a/_posts/2011-01-27-what-is-a-router.textile b/_posts/2011-01-27-what-is-a-router.textile new file mode 100644 index 00000000..f5fc2484 --- /dev/null +++ b/_posts/2011-01-27-what-is-a-router.textile @@ -0,0 +1,127 @@ +--- +layout: post +title: What is a router? +type: beginner +posturl: http://backbonetutorials.com/what-is-a-router +--- + +h2. What is a router? + +p. Backbone routers are used for routing your applications URL's when using hash tags(#). In the traditional MVC sense they don't neccesarily fit the semantics and if you have read ""What is a view?":http://backbonetutorials.com/what-is-a-view" it will elaborate on this point. Though a Backbone "router" is still very useful for any application/feature that needs URL routing/history capabilities. + +Defined routers should always contain at least one route and a function to map the particular route to. In the example below we are going to define a route that is always called. + +Also note that routes intepret anything after "#" tag in the url. All links in your application should target "#/action" or "#action". (Appending a forward slash after the hashtag looks a bit nicer e.g. http://example.com/#/user/help) + +{% highlight html %} + + + +Activate route +Activate another route + + +{% endhighlight %} + +*Please note: * Prior to Backbone 0.5 (released 1. July 2011) Routes was originally called Controllers. Due to clearity developers on the Backbone team renamed it to Routes. Hence, if you find yourself using an older version of Backbone you should write Backbone.Controller.extend({ ** }); + +h4. Dynamic Routing + +p. Most conventional frameworks allow you to define routes that contain a mix of static and dynamic route parameters. For example you might want to retrieve a post with a variable id with a friendly URL string. Such that your URL would look like "http://example.com/#/posts/12". Once this route was activated you would want to access the id given in the URL string. This example is implemented below. + +{% highlight html %} + + + +Post 120 +Post 130 + + +{% endhighlight %} + +h4. Dynamic Routing Cont. ":params" and "*splats" + +p. Backbone uses two styles of variables when implementing routes. First there are ":params" which match any URL components between slashes. Then there are "*splats" which match any number of URL components. Note that due to the nature of a "*splat" it will always be the last variable in your URL as it will match any and all components. + +Any "*splats" or ":params" in route definitions are passed as variables respective order to the associated function. A route defined as "/:route/:action" will pass 2 variables(route, action) to the call back function. Which can be accessed with "function( route, action )". (If this is confusing please post a comment and I will try articulate it better) + +Here are some examples of using ":params" and "*splats" + +{% highlight javascript %} + + routes: { + + "/posts/:id": "getPost", + // Example + + "/download/*path": "downloadFile", + // Download + + "/:route/:action": "loadView", + // Load Route/Action View + + }, + + getPost: function( id ){ alert(id); /* 121 */ }, + downloadFile: function( path ){ alert(path); /* user/images/hey.gif */ }, + loadView: function( route, action ){ + alert(route + "_" + action); + /* dashboard_graph */ + } + + +{% endhighlight %} + +p. Routes are quite powerful and in an ideal world your application should never contain too many. If you need to implement hash tags with SEO in mind, do a google search for "google seo hashbangs". + +Remember to do a pull request for any errors you come across. + +h4. Tips and Tricks + +p. No Tips and Tricks + +h3. Relevant Links +* "Backbone.js official router documentation":http://documentcloud.github.com/backbone/#Router +* "Using routes and understanding the hash tag":http://thomasdavis.github.com/2011/02/07/making-a-restful-ajax-app.html + +h3. Author + +* "Thomas Davis":https://github.com/thomasdavis + +h3. Contributors + +* "Herman Schistad":http://schistad.info (Backbone 0.5 rename from Controller to Router) diff --git a/_posts/2011-01-28-what-is-a-view.textile b/_posts/2011-01-28-what-is-a-view.textile new file mode 100644 index 00000000..43277bfd --- /dev/null +++ b/_posts/2011-01-28-what-is-a-view.textile @@ -0,0 +1,174 @@ +--- +layout: post +title: What is a view? +type: beginner +posturl: http://backbonetutorials.com/what-is-a-view +--- + +h2. What is a view? + +p. Backbone views are used to reflect what your applications' data models look like. They are also used to listen to events and react accordingly. This tutorial will not be addressing how to bind models and collections to views but will focus on view functionality and how to use views with a JavaScript templating library, specifically "Underscore.js's _.template":http://documentcloud.github.com/underscore/#template. + +We will be using "jQuery 1.5":http://jquery.com/ as our DOM manipulator. It's possible to use other libraries such as "MooTools":http://mootools.net/ or "Sizzle":http://sizzlejs.com/, but official Backbone.js documentation endorses jQuery. Backbone.View events may not work with other libraries other than jQuery. + +For the purposes of this demonstration, we will be implementing a search box. "A live example":http://jsfiddle.net/thomas/C9wew/6 can be found on jsFiddle. + +{% highlight javascript %} + SearchView = Backbone.View.extend({ + initialize: function(){ + alert("Alerts suck."); + } + }); + + // The initialize function is always called when instantiating a Backbone View. + // Consider it the constructor of the class. + var search_view = new SearchView; +{% endhighlight %} + +h4. The "el" property + +p. The "el" property references the DOM object created in the browser. Every Backbone.js view has an "el" property, and if it not defined, Backbone.js will construct its own, which is an empty div element. + +Let us set our view's "el" property to div#search_container, effectively making Backbone.View the owner of the DOM element. + +{% highlight html %} +
+ + +{% endhighlight %} + +p. *Note*: Keep in mind that this binds the container element. Any events we trigger must be in this element. + +h4. Loading a template + +p. Backbone.js is dependent on Underscore.js, which includes its own micro-templating solution. Refer to "Underscore.js's documentation":http://documentcloud.github.com/underscore/ for more information. + +Let us implement a "render()" function and call it when the view is initialized. The "render()" function will load our template into the view's "el" property using jQuery. + +{% highlight html %} +
+ + + + +{% endhighlight %} + +p. *Tip*: Place all your templates in a file and serve them from a CDN. This ensures your users will always have your application cached. + +h4. Listening for events + +p. To attach a listener to our view, we use the "events" attribute of Backbone.View. Remember that event listeners can only be attached to child elements of the "el" property. Let us attach a "click" listener to our button. + +{% highlight html %} +
+ + + + +{% endhighlight %} + + +h4. Tips and Tricks + +p. *Using template variables* + +{% highlight html %} +
+ + + + +{% endhighlight %} + +p. If you have any questions, leave a comment below. + +h3. Relevant Links +* "Backbone.js official website":http://documentcloud.github.com/backbone/ +* "This example implemented with google API":http://thomasdavis.github.com/2011/02/05/backbone-views-and-templates.html +* "This examples exact code on jsfiddle.net":http://jsfiddle.net/thomas/C9wew/4/ +* "Another semi-complete example on jsFiddle":http://jsfiddle.net/thomas/dKK9Y/6/ + +h3. Author + +* "Thomas Davis":https://github.com/thomasdavis + +h3. Contributors + +* "Michael Macias":https://github.com/zaeleus diff --git a/_posts/2011-01-29-what-is-a-model.textile b/_posts/2011-01-29-what-is-a-model.textile new file mode 100644 index 00000000..6b3ebdc8 --- /dev/null +++ b/_posts/2011-01-29-what-is-a-model.textile @@ -0,0 +1,210 @@ +--- +layout: post +title: What is a model? +type: beginner +posturl: http://backbonetutorials.com/what-is-a-model +--- + +h2. What is a model? + +p. Across the internet the definition of "MVC":http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller is so diluted that it's hard to tell what exactly your model should be doing. The authors of backbone.js have quite a clear definition of what they believe the model represents in backbone.js. + +bq. Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. + +p. So for the purpose of the tutorial let's create a model. + +{% highlight javascript %} + Person = Backbone.Model.extend({ + initialize: function(){ + alert("Welcome to this world"); + } + }); + + var person = new Person; +{% endhighlight %} + +p. So _initialize()_ is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don't have to include it in your model declaration but you will find yourself using it more often than not. + +h4. Setting attributes + +p. Now we want to pass some parameters when we create an instance of our model. + +{% highlight javascript %} + Person = Backbone.Model.extend({ + initialize: function(){ + alert("Welcome to this world"); + } + }); + + var person = new Person({ name: "Thomas", age: 67}); + delete person; + // or we can set afterwards, these operations are equivelent + var person = new Person(); + person.set({ name: "Thomas", age: 67}); + +{% endhighlight %} + +p. So passing a javascript object to our constructor is the same as calling _model.set()_. Now that these models have attributes set we need to be able to retrieve them. + +h4. Getting attributes + +p. Using the _model.get()_ method we can access model properties at anytime. + +{% highlight javascript %} + Person = Backbone.Model.extend({ + initialize: function(){ + alert("Welcome to this world"); + } + }); + + var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']}); + + var age = person.get("age"); // 67 + var name = person.get("name"); // "Thomas" + var children = person.get("children"); // ['Ryan'] + +{% endhighlight %} + +h4. Setting model defaults + +p. Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name 'defaults' in your model declaration. + +{% highlight javascript %} + Person = Backbone.Model.extend({ + defaults: { + name: 'Fetus', + age: 0, + children: [] + }, + initialize: function(){ + alert("Welcome to this world"); + } + }); + + var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']}); + + var age = person.get("age"); // 67 + var name = person.get("name"); // "Thomas" + var children = person.get("children"); // ['Ryan'] + +{% endhighlight %} + +h4. Manipulating model attributes + +p. Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public. + +{% highlight javascript %} + Person = Backbone.Model.extend({ + defaults: { + name: 'Fetus', + age: 0, + children: [] + }, + initialize: function(){ + alert("Welcome to this world"); + }, + adopt: function( newChildsName ){ + var children_array = this.get("children"); + children_array.push( newChildsName ); + this.set({ children: children_array }); + } + }); + + var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']}); + person.adopt('John Resig'); + var children = person.get("children"); // ['Ryan', 'John Resig'] + +{% endhighlight %} + +p. So we can implement methods to get/set and perform other calculations using attributes from our model at any time. + + +h4. Listening for changes to the model + +p. Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case if the name of our "person" changes we will alert their new name. + +{% highlight javascript %} + Person = Backbone.Model.extend({ + defaults: { + name: 'Fetus', + age: 0, + children: [] + }, + initialize: function(){ + alert("Welcome to this world"); + this.bind("change:name", function(){ + var name = this.get("name"); // 'Stewie Griffin' + alert("Changed my name to " + name ); + }); + }, + changeName: function( name ){ + this.set({ name: name }); + } + }); + + var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']}); + person.changeName('Stewie Griffin'); // This triggers a change and will alert() +{% endhighlight %} + +p. So we can bind the a change listener to individual attributes or if we like simply '_this.bind("change", function(){});_' to listen for changes to all attributes of the model. + +h4. Fetching, Saving and Destroying + +p. Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation. + +h4. Tips and Tricks + +p. *Get all the current attributes* + +{% highlight javascript %} + + var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']}); + var attributes = person.toJSON(); // { name: "Thomas", age: 67, children: ['Ryan']} + /* This simply returns a copy of the current attributes. */ + delete attributes; + var attributes = person.attributes; + /* The line above gives a direct reference to the attributes and you should be careful when playing with it. Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */ +{% endhighlight %} + +p. *Validate data before you set or save it* + +{% highlight javascript %} + + Person = Backbone.Model.extend({ + // If you return a string from the validate function, + // Backbone will throw an error + validate: function( attributes ){ + if( attributes.age < 0 && attributes.name != "Dr Manhatten" ){ + return "You can't be negative years old"; + } + }, + initialize: function(){ + alert("Welcome to this world"); + this.bind("error", function(model, error){ + // We have received an error, log it, alert it or forget it :) + alert( error ); + }); + } + }); + + var person = new Person; + person.set({ name: "Mary Poppins", age: -1 }); + // Will trigger an alert outputting the error + delete person; + + var person = new Person; + person.set({ name: "Dr Manhatten", age: -1 }); + // God have mercy on our souls + +{% endhighlight %} + +h3. Relevant Links +* "backbone.js official website":http://documentcloud.github.com/backbone/ + +h3. Author + +* "Thomas Davis":https://github.com/thomasdavis + +h3. Contributors + +* "Utkarsh Kukreti":https://github.com/utkarshkukreti diff --git a/_posts/2011-02-01-why-would-you-use-backbone.textile b/_posts/2011-02-01-why-would-you-use-backbone.textile new file mode 100644 index 00000000..a849f34e --- /dev/null +++ b/_posts/2011-02-01-why-would-you-use-backbone.textile @@ -0,0 +1,32 @@ +--- +layout: post +title: Why would you use Backbone.js? +type: beginner +posturl: http://backbonetutorials.com/what-would-you-use-backbone +--- + +h2. Why do you need Backbone.js? + +p. Building single-page web apps or complicated user interfaces will get extremely difficult by simply using "jQuery":http://jquery.com or "MooTools":http://mootools.net. The problem is standard JavaScript libraries are great at what they do - and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete DOM elements. + +I shouldn't need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of implement your own way of structuring your application but you miss out on the benefits of the open source community. + + + +h3. So how does Backbone.js help? + +p. Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to Backbone.js light nature you can incrementally include it in any current or future projects. + + +h3. Relevant Links +* "Backbone.js official website":http://documentcloud.github.com/backbone/ +* "great hackernews discussion /w post from author":http://news.ycombinator.com/item?id=2119704 + + +h3. Author + +* "Thomas Davis":https://github.com/thomasdavis + +h3. Contributors + +* "FND":https://github.com/FND diff --git a/_site/CNAME b/_site/CNAME new file mode 100644 index 00000000..0c9de916 --- /dev/null +++ b/_site/CNAME @@ -0,0 +1 @@ +backbonetutorials.com diff --git a/_site/README.md b/_site/README.md new file mode 100644 index 00000000..2229aeb4 --- /dev/null +++ b/_site/README.md @@ -0,0 +1,38 @@ + +# Backbone Tutorials + +This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome. +About Backbone Tutorials + +As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial + +I started this site to not only consolidate my understanding of backbone.js but to also document what I have learned thus far for myself and others. + +Thomas Davis - [@neutralthoughts](http://twitter.com/neutralthoughts) - Twitter + +## Contributions + +* Thanks to Cactus([https://github.com/cactus](https://github.com/cactus)) for creating the blog feed + +## About the author + +Looking for feedback on my latest startup Protosal(http://protosal.com) any and all would be great! + +**Contact:** + +* \#cdnjs on freenode +* @neutralthoughts on twitter +* thomasalwyndavis@gmail.com + +**Projects:** + +* Javascript Library CDN - http://cdnjs.com +* Proposal Generation Start up - http://protosal.com +* Backbone.js Tutorials - http://backbonetutorials.com +* Technical Blog - http://thomasdavis.github.com +* Github Account - https://github.com/thomasdavis +* Freelance Blog - http://thomasalwyndavis.com +* Quora - http://www.quora.com/Thomas-Davis +* StackOverflow - http://stackoverflow.com/users/580675/thomas-davis + +Love you mum! diff --git a/_site/about.html b/_site/about.html new file mode 100644 index 00000000..e005e7cc --- /dev/null +++ b/_site/about.html @@ -0,0 +1,107 @@ + + + + + + About Backbone Tutorials - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+ + + + +
+
+ home + examples + contribute + about + subscribe + chat +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+

About Backbone Tutorials

+

As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial.

+

I started this site to not only consolidate my understanding of backbone.js but to also document what I have learned thus far for myself and others.

+

You can contact the original owner of this site through github or via twitter(@neutralthoughts). You can also find me at #cdnjs on freenode.net.

+ + + +
+ +
+
+ + + + + diff --git a/_site/atom.xml b/_site/atom.xml new file mode 100644 index 00000000..ad9310af --- /dev/null +++ b/_site/atom.xml @@ -0,0 +1,551 @@ + + + + Backbone Tutorials + + + 2011-08-30T21:11:53+10:00 + http://backbonetutorials.com/ + + Thomas Davis + thomasalwyndavis@gmail.com + + + + + Why would you use Backbone.js? + + 2011-02-01T00:00:00+10:00 + http://backbonetutorials.com/why-would-you-use-backbone + <h2>Why do you need Backbone.js?</h2> +<p>Building single-page web apps or complicated user interfaces will get extremely difficult by simply using <a href="http://jquery.com">jQuery</a> or <a href="http://mootools.net">MooTools</a>. The problem is standard JavaScript libraries are great at what they do &#8211; and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete <span class="caps">DOM</span> elements.</p> +<p>I shouldn&#8217;t need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of implement your own way of structuring your application but you miss out on the benefits of the open source community.</p> +<h3>So how does Backbone.js help?</h3> +<p>Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to Backbone.js light nature you can incrementally include it in any current or future projects.</p> +<h3>Relevant Links</h3> +<ul> + <li><a href="http://documentcloud.github.com/backbone/">Backbone.js official website</a></li> + <li><a href="http://news.ycombinator.com/item?id=2119704">great hackernews discussion /w post from author</a></li> +</ul> +<h3>Author</h3> +<ul> + <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> +</ul> +<h3>Contributors</h3> +<ul> + <li><a href="https://github.com/FND"><span class="caps">FND</span></a></li> +</ul> + + + + What is a model? + + 2011-01-29T00:00:00+10:00 + http://backbonetutorials.com/what-is-a-model + <h2>What is a model?</h2> +<p>Across the internet the definition of <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller"><span class="caps">MVC</span></a> is so diluted that it&#8217;s hard to tell what exactly your model should be doing. The authors of backbone.js have quite a clear definition of what they believe the model represents in backbone.js.</p> +<blockquote> +<p>Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.</p> +</blockquote> +<p>So for the purpose of the tutorial let&#8217;s create a model.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> +</code></pre> +</div> +<p>So <em>initialize()</em> is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don&#8217;t have to include it in your model declaration but you will find yourself using it more often than not.</p> +<h4>Setting attributes</h4> +<p>Now we want to pass some parameters when we create an instance of our model.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> + <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> + <span class="c1">// or we can set afterwards, these operations are equivelent</span> + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">();</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> + +</code></pre> +</div> +<p>So passing a javascript object to our constructor is the same as calling <em>model.set()</em>. Now that these models have attributes set we need to be able to retrieve them.</p> +<h4>Getting attributes</h4> +<p>Using the <em>model.get()</em> method we can access model properties at anytime.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + + <span class="kd">var</span> <span class="nx">age</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> + <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">);</span> <span class="c1">// &quot;Thomas&quot;</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> + +</code></pre> +</div> +<h4>Setting model defaults</h4> +<p>Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name &#8216;defaults&#8217; in your model declaration.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> + <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> + <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + + <span class="kd">var</span> <span class="nx">age</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> + <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">);</span> <span class="c1">// &quot;Thomas&quot;</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> + +</code></pre> +</div> +<h4>Manipulating model attributes</h4> +<p>Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> + <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> + <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">},</span> + <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> + <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> + <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">&#39;John Resig&#39;</span><span class="p">);</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;, &#39;John Resig&#39;]</span> + +</code></pre> +</div> +<p>So we can implement methods to get/set and perform other calculations using attributes from our model at any time.</p> +<h4>Listening for changes to the model</h4> +<p>Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case if the name of our &#8220;person&#8221; changes we will alert their new name.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> + <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> + <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;change:name&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> + <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">);</span> <span class="c1">// &#39;Stewie Griffin&#39;</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Changed my name to &quot;</span> <span class="o">+</span> <span class="nx">name</span> <span class="p">);</span> + <span class="p">});</span> + <span class="p">},</span> + <span class="nx">changeName</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">name</span> <span class="p">){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="nx">name</span> <span class="p">});</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">changeName</span><span class="p">(</span><span class="s1">&#39;Stewie Griffin&#39;</span><span class="p">);</span> <span class="c1">// This triggers a change and will alert()</span> +</code></pre> +</div> +<p>So we can bind the a change listener to individual attributes or if we like simply &#8216;<em>this.bind(&#8220;change&#8221;, function(){});</em>&#8217; to listen for changes to all attributes of the model.</p> +<h4>Fetching, Saving and Destroying</h4> +<p>Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.</p> +<h4>Tips and Tricks</h4> +<p><strong>Get all the current attributes</strong></p> +<div class="highlight"><pre><code class="javascript"> + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span> <span class="c1">// { name: &quot;Thomas&quot;, age: 67, children: [&#39;Ryan&#39;]}</span> + <span class="cm">/* This simply returns a copy of the current attributes. */</span> + <span class="k">delete</span> <span class="nx">attributes</span><span class="p">;</span> + <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">attributes</span><span class="p">;</span> + <span class="cm">/* The line above gives a direct reference to the attributes and you should be careful when playing with it. Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */</span> +</code></pre> +</div> +<p><strong>Validate data before you set or save it</strong></p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="c1">// If you return a string from the validate function,</span> + <span class="c1">// Backbone will throw an error</span> + <span class="nx">validate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">attributes</span> <span class="p">){</span> + <span class="k">if</span><span class="p">(</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">age</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">name</span> <span class="o">!=</span> <span class="s2">&quot;Dr Manhatten&quot;</span> <span class="p">){</span> + <span class="k">return</span> <span class="s2">&quot;You can&#39;t be negative years old&quot;</span><span class="p">;</span> + <span class="p">}</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;error&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">error</span><span class="p">){</span> + <span class="c1">// We have received an error, log it, alert it or forget it :)</span> + <span class="nx">alert</span><span class="p">(</span> <span class="nx">error</span> <span class="p">);</span> + <span class="p">});</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Mary Poppins&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="p">});</span> + <span class="c1">// Will trigger an alert outputting the error</span> + <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Dr Manhatten&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="p">});</span> + <span class="c1">// God have mercy on our souls</span> + +</code></pre> +</div> +<h3>Relevant Links</h3> +<ul> + <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> +</ul> +<h3>Author</h3> +<ul> + <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> +</ul> +<h3>Contributors</h3> +<ul> + <li><a href="https://github.com/utkarshkukreti">Utkarsh Kukreti</a></li> +</ul> + + + + What is a view? + + 2011-01-28T00:00:00+10:00 + http://backbonetutorials.com/what-is-a-view + <h2>What is a view?</h2> +<p>Backbone views are used to reflect what your applications&#8217; data models look like. They are also used to listen to events and react accordingly. This tutorial will not be addressing how to bind models and collections to views but will focus on view functionality and how to use views with a JavaScript templating library, specifically <a href="http://documentcloud.github.com/underscore/#template">Underscore.js&#8217;s _.template</a>.</p> +<p>We will be using <a href="http://jquery.com/">jQuery 1.5</a> as our <span class="caps">DOM</span> manipulator. It&#8217;s possible to use other libraries such as <a href="http://mootools.net/">MooTools</a> or <a href="http://sizzlejs.com/">Sizzle</a>, but official Backbone.js documentation endorses jQuery. Backbone.View events may not work with other libraries other than jQuery.</p> +<p>For the purposes of this demonstration, we will be implementing a search box. <a href="http://jsfiddle.net/thomas/C9wew/6">A live example</a> can be found on jsFiddle.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">SearchView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Alerts suck.&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="c1">// The initialize function is always called when instantiating a Backbone View.</span> + <span class="c1">// Consider it the constructor of the class.</span> + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">;</span> +</code></pre> +</div> +<h4>The &#8220;el&#8221; property</h4> +<p>The &#8220;el&#8221; property references the <span class="caps">DOM</span> object created in the browser. Every Backbone.js view has an &#8220;el&#8221; property, and if it not defined, Backbone.js will construct its own, which is an empty div element.</p> +<p>Let us set our view&#8217;s &#8220;el&#8221; property to div#search_container, effectively making Backbone.View the owner of the <span class="caps">DOM</span> element.</p> +<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;search_container&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> + +<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span> + <span class="nx">SearchView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Alerts suck.&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">({</span> <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> +<span class="nt">&lt;/script&gt;</span> +</code></pre> +</div> +<p><strong>Note</strong>: Keep in mind that this binds the container element. Any events we trigger must be in this element.</p> +<h4>Loading a template</h4> +<p>Backbone.js is dependent on Underscore.js, which includes its own micro-templating solution. Refer to <a href="http://documentcloud.github.com/underscore/">Underscore.js&#8217;s documentation</a> for more information.</p> +<p>Let us implement a &#8220;render()&#8221; function and call it when the view is initialized. The &#8220;render()&#8221; function will load our template into the view&#8217;s &#8220;el&#8221; property using jQuery.</p> +<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;search_container&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> + +<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span> + <span class="nx">SearchView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Compile the template using underscore</span> + <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_template&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="p">{}</span> <span class="p">);</span> + <span class="c1">// Load the compiled HTML into the Backbone &quot;el&quot;</span> + <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">({</span> <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> +<span class="nt">&lt;/script&gt;</span> + +<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/template&quot;</span> <span class="na">id=</span><span class="s">&quot;search_template&quot;</span><span class="nt">&gt;</span> + <span class="o">&lt;</span><span class="nx">label</span><span class="o">&gt;</span><span class="nx">Search</span><span class="o">&lt;</span><span class="err">/label&gt;</span> + <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_input&quot;</span> <span class="o">/&gt;</span> + <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;button&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_button&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Search&quot;</span> <span class="o">/&gt;</span> +<span class="nt">&lt;/script&gt;</span> +</code></pre> +</div> +<p><strong>Tip</strong>: Place all your templates in a file and serve them from a <span class="caps">CDN</span>. This ensures your users will always have your application cached.</p> +<h4>Listening for events</h4> +<p>To attach a listener to our view, we use the &#8220;events&#8221; attribute of Backbone.View. Remember that event listeners can only be attached to child elements of the &#8220;el&#8221; property. Let us attach a &#8220;click&#8221; listener to our button.</p> +<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;search_container&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> + +<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span> + <span class="nx">SearchView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_template&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="p">{}</span> <span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> + <span class="p">},</span> + <span class="nx">events</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">&quot;click input[type=button]&quot;</span><span class="o">:</span> <span class="s2">&quot;doSearch&quot;</span> + <span class="p">},</span> + <span class="nx">doSearch</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">event</span> <span class="p">){</span> + <span class="c1">// Button clicked, you can access the element that was clicked with event.currentTarget</span> + <span class="nx">alert</span><span class="p">(</span> <span class="s2">&quot;Search for &quot;</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_input&quot;</span><span class="p">).</span><span class="nx">val</span><span class="p">()</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">({</span> <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> +<span class="nt">&lt;/script&gt;</span> + +<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/template&quot;</span> <span class="na">id=</span><span class="s">&quot;search_template&quot;</span><span class="nt">&gt;</span> + <span class="o">&lt;</span><span class="nx">label</span><span class="o">&gt;</span><span class="nx">Search</span><span class="o">&lt;</span><span class="err">/label&gt;</span> + <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_input&quot;</span> <span class="o">/&gt;</span> + <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;button&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_button&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Search&quot;</span> <span class="o">/&gt;</span> +<span class="nt">&lt;/script&gt;</span> +</code></pre> +</div> +<h4>Tips and Tricks</h4> +<p><strong>Using template variables</strong></p> +<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;search_container&quot;</span><span class="nt">&gt;&lt;/div&gt;</span> + +<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span> + <span class="nx">SearchView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> + <span class="p">},</span> + <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">//Pass variables in using Underscore.js Template</span> + <span class="kd">var</span> <span class="nx">variables</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">search_label</span><span class="o">:</span> <span class="s2">&quot;My Search&quot;</span> <span class="p">};</span> + <span class="c1">// Compile the template using underscore</span> + <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_template&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(),</span> <span class="nx">variables</span> <span class="p">);</span> + <span class="c1">// Load the compiled HTML into the Backbone &quot;el&quot;</span> + <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span> <span class="nx">template</span> <span class="p">);</span> + <span class="p">},</span> + <span class="nx">events</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">&quot;click input[type=button]&quot;</span><span class="o">:</span> <span class="s2">&quot;doSearch&quot;</span> + <span class="p">},</span> + <span class="nx">doSearch</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">event</span> <span class="p">){</span> + <span class="c1">// Button clicked, you can access the element that was clicked with event.currentTarget</span> + <span class="nx">alert</span><span class="p">(</span> <span class="s2">&quot;Search for &quot;</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_input&quot;</span><span class="p">).</span><span class="nx">val</span><span class="p">()</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">search_view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SearchView</span><span class="p">({</span> <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#search_container&quot;</span><span class="p">)</span> <span class="p">});</span> +<span class="nt">&lt;/script&gt;</span> + +<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/template&quot;</span> <span class="na">id=</span><span class="s">&quot;search_template&quot;</span><span class="nt">&gt;</span> + <span class="c">&lt;!--</span> <span class="nx">Access</span> <span class="nx">template</span> <span class="nx">variables</span> <span class="kd">with</span> <span class="o">&lt;%=</span> <span class="o">%&gt;</span> <span class="o">--&gt;</span> + <span class="o">&lt;</span><span class="nx">label</span><span class="o">&gt;&lt;%=</span> <span class="nx">search_label</span> <span class="o">%&gt;&lt;</span><span class="err">/label&gt;</span> + <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_input&quot;</span> <span class="o">/&gt;</span> + <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;button&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;search_button&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Search&quot;</span> <span class="o">/&gt;</span> +<span class="nt">&lt;/script&gt;</span> +</code></pre> +</div> +<p>If you have any questions, leave a comment below.</p> +<h3>Relevant Links</h3> +<ul> + <li><a href="http://documentcloud.github.com/backbone/">Backbone.js official website</a></li> + <li><a href="http://thomasdavis.github.com/2011/02/05/backbone-views-and-templates.html">This example implemented with google <span class="caps">API</span></a></li> + <li><a href="http://jsfiddle.net/thomas/C9wew/4/">This examples exact code on jsfiddle.net</a></li> + <li><a href="http://jsfiddle.net/thomas/dKK9Y/6/">Another semi-complete example on jsFiddle</a></li> +</ul> +<h3>Author</h3> +<ul> + <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> +</ul> +<h3>Contributors</h3> +<ul> + <li><a href="https://github.com/zaeleus">Michael Macias</a></li> +</ul> + + + + What is a router? + + 2011-01-27T00:00:00+10:00 + http://backbonetutorials.com/what-is-a-router + <h2>What is a router?</h2> +<p>Backbone routers are used for routing your applications URL&#8217;s when using hash tags(#). In the traditional <span class="caps">MVC</span> sense they don&#8217;t neccesarily fit the semantics and if you have read &#8220;<a href="http://backbonetutorials.com/what-is-a-view">What is a view?</a>&#8221; it will elaborate on this point. Though a Backbone &#8220;router&#8221; is still very useful for any application/feature that needs <span class="caps">URL</span> routing/history capabilities.</p> +<p>Defined routers should always contain at least one route and a function to map the particular route to. In the example below we are going to define a route that is always called.</p> +<p>Also note that routes intepret anything after &#8220;#&#8221; tag in the url. All links in your application should target &#8220;#/action&#8221; or &#8220;#action&#8221;. (Appending a forward slash after the hashtag looks a bit nicer e.g. http://example.com/#/user/help)</p> +<div class="highlight"><pre><code class="html"><span class="nt">&lt;script&gt;</span> + <span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">routes</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">&quot;*actions&quot;</span><span class="o">:</span> <span class="s2">&quot;defaultRoute&quot;</span> <span class="c1">// matches http://example.com/#anything-here</span> + <span class="p">},</span> + <span class="nx">defaultRoute</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">actions</span> <span class="p">){</span> + <span class="c1">// The variable passed in matches the variable in the route definition &quot;actions&quot;</span> + <span class="nx">alert</span><span class="p">(</span> <span class="nx">actions</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + <span class="c1">// Initiate the router</span> + <span class="kd">var</span> <span class="nx">app_router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppRouter</span><span class="p">;</span> + <span class="c1">// Start Backbone history a neccesary step for bookmarkable URL&#39;s</span> + <span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span> + +<span class="nt">&lt;/script&gt;</span> + +<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#action&quot;</span><span class="nt">&gt;</span>Activate route<span class="nt">&lt;/a&gt;</span> +<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#/route/action&quot;</span><span class="nt">&gt;</span>Activate another route<span class="nt">&lt;/a&gt;</span> +<span class="c">&lt;!-- Notice the change in the url --&gt;</span> +</code></pre> +</div> +<p><strong>Please note: * Prior to Backbone 0.5 (released 1. July 2011) Routes was originally called Controllers. Due to clearity developers on the Backbone team renamed it to Routes. Hence, if you find yourself using an older version of Backbone you should write Backbone.Controller.extend({ *</strong> });</p> +<h4>Dynamic Routing</h4> +<p>Most conventional frameworks allow you to define routes that contain a mix of static and dynamic route parameters. For example you might want to retrieve a post with a variable id with a friendly <span class="caps">URL</span> string. Such that your <span class="caps">URL</span> would look like &#8220;http://example.com/#/posts/12&#8221;. Once this route was activated you would want to access the id given in the <span class="caps">URL</span> string. This example is implemented below.</p> +<div class="highlight"><pre><code class="html"><span class="nt">&lt;script&gt;</span> + <span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">routes</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">&quot;/posts/:id&quot;</span><span class="o">:</span> <span class="s2">&quot;getPost&quot;</span><span class="p">,</span> + <span class="s2">&quot;*actions&quot;</span><span class="o">:</span> <span class="s2">&quot;defaultRoute&quot;</span> <span class="c1">// Backbone will try match the route above first</span> + <span class="p">},</span> + <span class="nx">getPost</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">id</span> <span class="p">)</span> <span class="p">{</span> + <span class="c1">// Note the variable in the route definition being passed in here</span> + <span class="nx">alert</span><span class="p">(</span> <span class="s2">&quot;Get post number &quot;</span> <span class="o">+</span> <span class="nx">id</span> <span class="p">);</span> + <span class="p">},</span> + <span class="nx">defaultRoute</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">actions</span> <span class="p">){</span> + <span class="nx">alert</span><span class="p">(</span> <span class="nx">actions</span> <span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + <span class="c1">// Instantiate the router</span> + <span class="kd">var</span> <span class="nx">app_router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppRouter</span><span class="p">;</span> + <span class="c1">// Start Backbone history a neccesary step for bookmarkable URL&#39;s</span> + <span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span> + +<span class="nt">&lt;/script&gt;</span> + +<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#/posts/120&quot;</span><span class="nt">&gt;</span>Post 120<span class="nt">&lt;/a&gt;</span> +<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#/posts/130&quot;</span><span class="nt">&gt;</span>Post 130<span class="nt">&lt;/a&gt;</span> +<span class="c">&lt;!-- Notice the change in the url --&gt;</span> +</code></pre> +</div> +<h4>Dynamic Routing Cont. &#8220;:params&#8221; and &#8220;*splats&#8221;</h4> +<p>Backbone uses two styles of variables when implementing routes. First there are &#8220;:params&#8221; which match any <span class="caps">URL</span> components between slashes. Then there are &#8220;*splats&#8221; which match any number of <span class="caps">URL</span> components. Note that due to the nature of a &#8220;*splat&#8221; it will always be the last variable in your <span class="caps">URL</span> as it will match any and all components.</p> +<p>Any &#8220;*splats&#8221; or &#8220;:params&#8221; in route definitions are passed as variables respective order to the associated function. A route defined as &#8220;/:route/:action&#8221; will pass 2 variables(route, action) to the call back function. Which can be accessed with &#8220;function( route, action )&#8221;. (If this is confusing please post a comment and I will try articulate it better)</p> +<p>Here are some examples of using &#8220;:params&#8221; and &#8220;*splats&#8221;</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">routes</span><span class="o">:</span> <span class="p">{</span> + + <span class="s2">&quot;/posts/:id&quot;</span><span class="o">:</span> <span class="s2">&quot;getPost&quot;</span><span class="p">,</span> + <span class="c1">// &lt;a href=&quot;http://example.com/#/posts/121&quot;&gt;Example&lt;/a&gt;</span> + + <span class="s2">&quot;/download/*path&quot;</span><span class="o">:</span> <span class="s2">&quot;downloadFile&quot;</span><span class="p">,</span> + <span class="c1">// &lt;a href=&quot;http://example.com/#/download/user/images/hey.gif&quot;&gt;Download&lt;/a&gt;</span> + + <span class="s2">&quot;/:route/:action&quot;</span><span class="o">:</span> <span class="s2">&quot;loadView&quot;</span><span class="p">,</span> + <span class="c1">// &lt;a href=&quot;http://example.com/#/dashboard/graph&quot;&gt;Load Route/Action View&lt;/a&gt;</span> + + <span class="p">},</span> + + <span class="nx">getPost</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">id</span> <span class="p">){</span> <span class="nx">alert</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span> <span class="cm">/* 121 */</span> <span class="p">},</span> + <span class="nx">downloadFile</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">path</span> <span class="p">){</span> <span class="nx">alert</span><span class="p">(</span><span class="nx">path</span><span class="p">);</span> <span class="cm">/* user/images/hey.gif */</span> <span class="p">},</span> + <span class="nx">loadView</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">route</span><span class="p">,</span> <span class="nx">action</span> <span class="p">){</span> + <span class="nx">alert</span><span class="p">(</span><span class="nx">route</span> <span class="o">+</span> <span class="s2">&quot;_&quot;</span> <span class="o">+</span> <span class="nx">action</span><span class="p">);</span> + <span class="cm">/* dashboard_graph */</span> + <span class="p">}</span> +</code></pre> +</div> +<p>Routes are quite powerful and in an ideal world your application should never contain too many. If you need to implement hash tags with <span class="caps">SEO</span> in mind, do a google search for &#8220;google seo hashbangs&#8221;.</p> +<p>Remember to do a pull request for any errors you come across.</p> +<h4>Tips and Tricks</h4> +<p>No Tips and Tricks</p> +<h3>Relevant Links</h3> +<ul> + <li><a href="http://documentcloud.github.com/backbone/#Router">Backbone.js official router documentation</a></li> + <li><a href="http://thomasdavis.github.com/2011/02/07/making-a-restful-ajax-app.html">Using routes and understanding the hash tag</a></li> +</ul> +<h3>Author</h3> +<ul> + <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> +</ul> +<h3>Contributors</h3> +<ul> + <li><a href="http://schistad.info">Herman Schistad</a> (Backbone 0.5 rename from Controller to Router)</li> +</ul> + + + + What is a collection? + + 2011-01-26T00:00:00+10:00 + http://backbonetutorials.com/what-is-a-collection + <h1>In progress</h1> +<h2>What is a collection?</h2> +<p>Backbone collections are simply an ordered set of <a href="/what-is-a-model">models</a>. Such that it can be used in situations such as;</p> +<ul> + <li>Model: Student, Collection: ClassStudents</li> + <li>Model: Todo Item, Collection: Todo List</li> + <li>Model: Animals, Collection: Zoo</li> +</ul> +<p>Typically your collection will only use one type of model but models themselves are not limited to a type of collection;</p> +<ul> + <li>Model: Student, Collection: Gym Class</li> + <li>Model: Student, Collection: Art Class</li> + <li>Model: Student, Collection: English Class</li> +</ul> +<p>Here is a generic Model/Collection example.</p> +<div class="highlight"><pre><code class="javascript"> <span class="kd">var</span> <span class="nx">Song</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Music is the answer&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">Album</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">model</span><span class="o">:</span> <span class="nx">Song</span> + <span class="p">});</span> +</code></pre> +</div> +<h3>Building a collection</h3> +<p>Now we are going to populate a creation with some useful data.</p> +<div class="highlight"><pre><code class="javascript"> <span class="kd">var</span> <span class="nx">Song</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Not specified&quot;</span><span class="p">,</span> + <span class="nx">artist</span><span class="o">:</span> <span class="s2">&quot;Not specified&quot;</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Music is the answer&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">Album</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">model</span><span class="o">:</span> <span class="nx">Song</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">song1</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Song</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;How Bizarre&quot;</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">&quot;OMC&quot;</span> <span class="p">});</span> + <span class="kd">var</span> <span class="nx">song2</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Song</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Sexual Healing&quot;</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">&quot;Marvin Gaye&quot;</span> <span class="p">});</span> + <span class="kd">var</span> <span class="nx">song3</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Song</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Talk It Over In Bed&quot;</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">&quot;OMC&quot;</span> <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">myAlbum</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Album</span><span class="p">([</span> <span class="nx">song1</span><span class="p">,</span> <span class="nx">song2</span><span class="p">,</span> <span class="nx">song3</span><span class="p">]);</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">myAlbum</span><span class="p">.</span><span class="nx">models</span> <span class="p">);</span> <span class="c1">// [song1, song2, song3]</span> + +</code></pre> +</div> +<h3>So how does Backbone.js help?</h3> +<p>Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to Backbone.js light nature you can incrementally include it in any current or future projects.</p> +<h3>Relevant Links</h3> +<ul> + <li><a href="http://documentcloud.github.com/backbone/">Backbone.js official website</a></li> + <li><a href="http://news.ycombinator.com/item?id=2119704">great hackernews discussion /w post from author</a></li> +</ul> +<h3>Author</h3> +<ul> + <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> +</ul> +<h3>Contributors</h3> +<ul> + <li><a href="https://github.com/FND"><span class="caps">FND</span></a></li> +</ul> + + + diff --git a/_site/chat.html b/_site/chat.html new file mode 100644 index 00000000..50a52353 --- /dev/null +++ b/_site/chat.html @@ -0,0 +1,106 @@ + + + + + + Chat - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+ + + + +
+
+ home + examples + contribute + about + subscribe + chat +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+

+

#cdnjs on irc.freenode.net, don’t forget to follow me on twitter.


+

+ + + +
+ +
+
+ + + + + diff --git a/_site/contact.html b/_site/contact.html new file mode 100644 index 00000000..ae54cf39 --- /dev/null +++ b/_site/contact.html @@ -0,0 +1,105 @@ + + + + + + Contact - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+ + + + +
+
+ home + examples + contribute + about + subscribe + chat +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+

Contact

+

You can contact the original owner of this site through github or via twitter(@neutralthoughts).

+ + + +
+ +
+
+ + + + + diff --git a/_site/contribute.html b/_site/contribute.html new file mode 100644 index 00000000..9ddb3fea --- /dev/null +++ b/_site/contribute.html @@ -0,0 +1,106 @@ + + + + + + Contribute - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+ + + + +
+
+ home + examples + contribute + about + subscribe + chat +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+

Contribute

+

The main goal behind BackboneTutorials.com is to build a comprehensive guide for developers of all levels of experience. Discussion and debate are encouraged and will hopefully breed innovation for javascript applications.

+

All contributions will be well acknowledged on the site.

+ + + +
+ +
+
+ + + + + diff --git a/_site/css/reset.css b/_site/css/reset.css new file mode 100644 index 00000000..5b41bb7b --- /dev/null +++ b/_site/css/reset.css @@ -0,0 +1,260 @@ +/** + * HTML5 ✰ Boilerplate + * + * style.css contains a reset, font normalization and some base styles. + * + * Credit is left where credit is due. + * Much inspiration was taken from these projects: + * - yui.yahooapis.com/2.8.1/build/base/base.css + * - camendesign.com/design/ + * - praegnanz.de/weblog/htmlcssjs-kickstart + */ + + +/** + * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) + * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark + * html5doctor.com/html-5-reset-stylesheet/ + */ + +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +blockquote, q { quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { content: ""; content: none; } + +ins { background-color: #ff9; color: #000; text-decoration: none; } + +mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } + +del { text-decoration: line-through; } + +abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } + +table { border-collapse: collapse; border-spacing: 0; } + +hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } + +input, select { vertical-align: middle; } + + +/** + * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/ + */ + +body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */ +select, input, textarea, button { font:99% sans-serif; } + +/* Normalize monospace sizing: + en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ +pre, code, kbd, samp { font-family: monospace, sans-serif; } + + +/** + * Minimal base styles. + */ + +/* Always force a scrollbar in non-IE */ +html { overflow-y: scroll; } + +/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ +a:hover, a:active { outline: none; } + +ul, ol { margin-left: 2em; } +ol { list-style-type: decimal; } + +/* Remove margins for navigation lists */ +nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } + +small { font-size: 85%; } +strong, th { font-weight: bold; } + +td { vertical-align: top; } + +/* Set sub, sup without affecting line-height: gist.github.com/413930 */ +sub, sup { font-size: 75%; line-height: 0; position: relative; } +sup { top: -0.5em; } +sub { bottom: -0.25em; } + +pre { + /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ + white-space: pre; white-space: pre-wrap; word-wrap: break-word; + padding: 15px; +} + +textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */ + +.ie6 legend, .ie7 legend { margin-left: -7px; } + +/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ +input[type="radio"] { vertical-align: text-bottom; } +input[type="checkbox"] { vertical-align: bottom; } +.ie7 input[type="checkbox"] { vertical-align: baseline; } +.ie6 input { vertical-align: text-bottom; } + +/* Hand cursor on clickable input elements */ +label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } + +/* Webkit browsers add a 2px margin outside the chrome of form elements */ +button, input, select, textarea { margin: 0; } + +/* Colors for form validity */ +input:valid, textarea:valid { } +input:invalid, textarea:invalid { + border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; +} +.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } + + +/* These selection declarations have to be separate + No text-shadow: twitter.com/miketaylr/status/12228805301 + Also: hot pink! */ +::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } +::selection { background:#FF5E99; color:#fff; text-shadow: none; } + +/* j.mp/webkit-tap-highlight-color */ +a:link { -webkit-tap-highlight-color: #FF5E99; } + +/* Make buttons play nice in IE: + www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ +button { width: auto; overflow: visible; } + +/* Bicubic resizing for non-native sized IMG: + code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ +.ie7 img { -ms-interpolation-mode: bicubic; } + +/** + * You might tweak these.. + */ + +body, select, input, textarea { + /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ + color: #444; + /* Set your base font here, to apply evenly */ + /* font-family: Georgia, serif; */ +} + +/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */ +h1, h2, h3, h4, h5, h6 { font-weight: bold; } + +a, a:active, a:visited { color: #607890; } +a:hover { color: #036; } + + +/** + * Primary styles + * + * Author: + */ + + + + + + + + + + + + + + + + +/** + * Non-semantic helper classes: please define your styles before this section. + */ + +/* For image replacement */ +.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } + +/* Hide for both screenreaders and browsers: + css-discuss.incutio.com/wiki/Screenreader_Visibility */ +.hidden { display: none; visibility: hidden; } + +/* Hide only visually, but have it available for screenreaders: by Jon Neal. + www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ +.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } +/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } + +/* Hide visually and from screenreaders, but maintain layout */ +.invisible { visibility: hidden; } + +/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. + j.mp/bestclearfix */ +.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } +.clearfix:after { clear: both; } +/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ +.clearfix { zoom: 1; } + + + +/** + * Media queries for responsive design. + * + * These follow after primary styles so they will successfully override. + */ + +@media all and (orientation:portrait) { + /* Style adjustments for portrait mode goes here */ + +} + +@media all and (orientation:landscape) { + /* Style adjustments for landscape mode goes here */ + +} + +/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) + consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ +@media screen and (max-device-width: 480px) { + + + /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */ + /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ +} + + +/** + * Print styles. + * + * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ + */ +@media print { + * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; + -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ + a, a:visited { color: #444 !important; text-decoration: underline; } + a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { content: " (" attr(title) ")"; } + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ + tr, img { page-break-inside: avoid; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3{ page-break-after: avoid; } +} diff --git a/_site/css/ribbon.css b/_site/css/ribbon.css new file mode 100644 index 00000000..580b9d3c --- /dev/null +++ b/_site/css/ribbon.css @@ -0,0 +1,115 @@ +@font-face { + font-family: Collegiate; + src: url("Collegiate.ttf"); +} + +.ribbon-holder { + position: absolute; + top: 0; + overflow: hidden; + height: 10em; +} + +.right.ribbon-holder { + right: 0; +} + +.left.ribbon-holder { + left: 0; +} + +.ribbon, +.ribbon:hover { + text-decoration: none; +} + +.ribbon { + font-family: Collegiate, sans-serif; + letter-spacing: -.1px; + opacity: 0.95; + + padding: 0.25em 0; + position: relative; + top: 2.5em; + + /* Defaults friendly for white pages. */ + -moz-box-shadow: 0 0 13px #888; + -webkit-box-shadow: 0 0 13px #888; + color: #FFF; + display: block; + line-height: 1.35em; +} + +.ribbon .text { + padding: 0.1em 3em; +} + +.right .ribbon { + -moz-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + right: -2.6em; +} + +.left .ribbon { + -moz-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + left: -2.6em; +} + +.white.ribbon { + color: #111; + background-color: #F5F5F5; + background: -webkit-gradient(linear, left bottom, left top, from(#f3f3f3), to(#fff)); + -moz-box-shadow: 0 0 13px #999; + -webkit-box-shadow: 0 0 13px #999; + text-shadow: 0 0 .05em; +} + +.white.ribbon .text { + border: 1px solid #cecece; +} + +.red.ribbon { + background-color: #9a0000; + background: -webkit-gradient(linear, left bottom, left top, from(#9a0000), to(#a90000)); +} + +.red.ribbon .text { + border: 1px solid #bf6060; +} + +.green.ribbon { + background-color: #006e00; + background: -webkit-gradient(linear, left bottom, left top, from(#006e00), to(#007200)); +} + +.green.ribbon .text { + border: 1px solid #6bac6b; +} + +.darkblue.ribbon { + background-color: #121621; + color: #ecedee; +} + +.darkblue.ribbon .text { + border: 1px solid #53565e; +} + +.orange.ribbon { + background-color: #E57504; + background: -webkit-gradient(linear, left bottom, left top, from(#dc7202), to(#ee7906)); +} + +.orange.ribbon .text { + border: 1px solid #ebaa65; +} + +.gray.ribbon { + background-color: #6d6d6d; + background: -webkit-gradient(linear, left bottom, left top, from(#6a6a6a) to(#6d6d6d)); +} + +.gray.ribbon .text { + border: 1px solid #a4a4a4; +} diff --git a/_site/css/stacklayout.css b/_site/css/stacklayout.css new file mode 100644 index 00000000..149a432f --- /dev/null +++ b/_site/css/stacklayout.css @@ -0,0 +1,96 @@ +/* +* StackLayout by Campbell McGuiness +* +* http://stacklayout.com/ +* http://twitter.com/stacklayout +* http://www.decalcms.com/ +* http://workingsoftware.com.au/ +* +* This work is licensed under Creative Commons * Attribution-ShareAlike 3.0 Australia License * http://creativecommons.org/licenses/by-sa/3.0/au/ +* +* Please retain this credit and let us know if you use StackLayout for inclusion on http://stacklayout.com/who.html +* +* cam@workingsoftware.com.au +*/ +.stack, +.stack1of2, +.stack1of3, +.stack2of3, +.stack1of4, +.stack3of4, +.stack1of5, +.stack2of5, +.stack3of5, +.stack4of5, +.stackAuto +{ + display:inline-block; + font-family:'Courier New',monospace; + letter-spacing:-0.65em; + word-spacing:-0.65em; + text-align:center; + vertical-align:top; +} +.stackContent +{ + display:block; + letter-spacing:normal; + word-spacing:normal; + text-align:left; +} +.stackContent:after +{ + content:"."; + display:block; + height:0; + clear:both; + visibility:hidden; +} +.stackAuto .stackContent +{ + text-align:center; +} +.stackAuto +{ + width:auto; +} +.stack +{ + width:100%; +} +.stack1of2 +{ + width:50%; +} +.stack1of3 +{ + width:33.334%; +} +.stack2of3 +{ + width:66.667%; +} +.stack1of4 +{ + width:25%; +} +.stack3of4 +{ + width:75%; +} +.stack1of5 +{ + width:20%; +} +.stack2of5 +{ + width:40%; +} +.stack3of5 +{ + width:60%; +} +.stack4of5 +{ + width:80%; +} diff --git a/_site/css/style.css b/_site/css/style.css new file mode 100644 index 00000000..d9a8e4e2 --- /dev/null +++ b/_site/css/style.css @@ -0,0 +1,81 @@ + +body { font:1em/1.625em "lucida grande","lucida sans unicode", sans-serif; background-color:#FFFEF0; +font-size-adjust:none; +font-style:normal; +font-variant:normal; +font-weight:normal; +} + +p { padding:0 0 0.8125em 0; color:#111; font-weight:300;} + +p + p { text-indent:1.625em;} + +p.first:first-letter{ float:left;font-family: baskerville,"palatino linotype",serif;font-size:3em;font-weight:700;line-height:1em;margin-bottom:-0.2em;padding:0.2em 0.1em 0 0; } +p img { float: left; margin: 0.5em 0.8125em 0.8125em 0; padding: 0; } +p img.right { float: right; margin: 0.5em 0 0.8125em 0.8125em } + + +h1,h2{ font-weight:normal; color: #333; font-family:Georgia, serif; } +h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, serif; } + + +h1 { font-size: 2.125em; margin-bottom: 0.765em; } +h2 { font-size: 1.9em; margin-bottom: 0.855em; } +h3 { font-size: 1.7em; margin-bottom: 0.956em; } +h4 { font-size: 1.4em; margin-bottom: 1.161em; } +h5,h6 { font-size: 1.313em; margin-bottom: 1.238em; } + + + +ul{list-style-position:outside;} +li ul, +li ol { margin:0 1.625em; } +ul, ol { margin: 0 0 1.625em 0; } + + +dl { margin: 0 0 1.625em 0; } +dl dt { font-weight: bold; } +dl dd { margin-left: 1.625em; } + +a { color:#005AF2; text-decoration:none; } +a:hover { text-decoration: underline; } + + +table { margin-bottom:1.625em; border-collapse: collapse; } +th { font-weight:bold; } +tr,th,td { margin:0; padding:0 1.625em 0 1em; height:26px; } +tfoot { font-style: italic; } +caption { text-align:center; font-family:Georgia, serif; } + + +abbr, acronym { border-bottom:1px dotted #000; } +address { margin-top:1.625em; font-style: italic; } +del {color:#000;} + + +blockquote { padding:1em 1em 1.625em 1em; font-family:georgia,serif;font-style: italic; margin-bottom: 20px;} +blockquote:before { content:"\201C";font-size:3em;margin-left:-.625em; font-family:georgia,serif;color:#aaa;line-height:0;}/* From Tripoli */ +blockquote:after { content:"\201D";font-size:3em;margin-right:0px; font-family:georgia,serif;color:#aaa;line-height:0;margin-top: 25px;float: right;}/* From Tripoli */ +blockquote > p {padding:0; margin:0; } + +strong { font-weight: bold; } +em, dfn { font-style: italic; } +dfn { font-weight: bold; } +pre, code { margin: 1.625em 0; white-space: pre; } +pre, code, tt { font: 1em monospace; line-height: 1.5; } +tt { display: block; margin: 1.625em 0; } +hr { margin-bottom:1.625em; } + + + +.oldbook { font-family:"Warnock Pro","Goudy Old Style","Book Antiqua","Palatino",Georgia,serif; } +.note { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; margin:0.1em; color:#333; } +.mono { font-family:"Courier New", Courier, monospace; } + +.tutorials { + list-style: none; + margin-left: 20px; +} +ul { + margin-left: 20px; +} diff --git a/_site/css/syntax.css b/_site/css/syntax.css new file mode 100644 index 00000000..2774b764 --- /dev/null +++ b/_site/css/syntax.css @@ -0,0 +1,60 @@ +.highlight { background: #ffffff; } +.highlight .c { color: #999988; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .k { font-weight: bold } /* Keyword */ +.highlight .o { font-weight: bold } /* Operator */ +.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ +.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #999999 } /* Generic.Heading */ +.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { font-weight: bold } /* Keyword.Constant */ +.highlight .kd { font-weight: bold } /* Keyword.Declaration */ +.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #d14 } /* Literal.String */ +.highlight .na { color: #008080 } /* Name.Attribute */ +.highlight .nb { color: #0086B3 } /* Name.Builtin */ +.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ +.highlight .no { color: #008080 } /* Name.Constant */ +.highlight .ni { color: #800080 } /* Name.Entity */ +.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nn { color: #555555 } /* Name.Namespace */ +.highlight .nt { color: #000080 } /* Name.Tag */ +.highlight .nv { color: #008080 } /* Name.Variable */ +.highlight .ow { font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #d14 } /* Literal.String.Backtick */ +.highlight .sc { color: #d14 } /* Literal.String.Char */ +.highlight .sd { color: #d14 } /* Literal.String.Doc */ +.highlight .s2 { color: #d14 } /* Literal.String.Double */ +.highlight .se { color: #d14 } /* Literal.String.Escape */ +.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ +.highlight .si { color: #d14 } /* Literal.String.Interpol */ +.highlight .sx { color: #d14 } /* Literal.String.Other */ +.highlight .sr { color: #009926 } /* Literal.String.Regex */ +.highlight .s1 { color: #d14 } /* Literal.String.Single */ +.highlight .ss { color: #990073 } /* Literal.String.Symbol */ +.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #008080 } /* Name.Variable.Class */ +.highlight .vg { color: #008080 } /* Name.Variable.Global */ +.highlight .vi { color: #008080 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ diff --git a/_site/examples.html b/_site/examples.html new file mode 100644 index 00000000..504c9353 --- /dev/null +++ b/_site/examples.html @@ -0,0 +1,109 @@ + + + + + + Contact - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+ + + + +
+
+ home + examples + contribute + about + subscribe + chat +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+

Examples of sites using Backbone.js

+

Protosal.com

+

Generate proposals for your clients with ease using predefined templates. Track how often your proposals get accepted or declined and who your best client are.

+

CouchDb and Node.js Backend

+

GetFlow.com

+

Flow is a task management app that makes working with your team a breeze. You can see the internals under window.Flow.

+ + + +
+ +
+
+ + + + + diff --git a/_site/index.html b/_site/index.html new file mode 100644 index 00000000..0f200015 --- /dev/null +++ b/_site/index.html @@ -0,0 +1,144 @@ + + + + + + - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+ + + + +
+
+ home + examples + contribute + about + subscribe + chat +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+

Beginner

+ + +

Intermediate

+
    +
  • Coming Soon
    • +
+ +

Advanced

+
    +
  • Coming Soon
    • +
+


+

External Tutorials

+ + + + + +
+ +
+
+ + + + + diff --git a/_site/pygments/CNAME b/_site/pygments/CNAME new file mode 100644 index 00000000..0c9de916 --- /dev/null +++ b/_site/pygments/CNAME @@ -0,0 +1 @@ +backbonetutorials.com diff --git a/_site/pygments/README.md b/_site/pygments/README.md new file mode 100644 index 00000000..d0e47f33 --- /dev/null +++ b/_site/pygments/README.md @@ -0,0 +1,15 @@ + +# Backbone Tutorials + +This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome. +About Backbone Tutorials + +As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial + +I started this site to not only consolidate my understanding of backbone.js but to also document what I have learned thus far for myself and others. + +Thomas Davis - [@neutralthoughts](http://twitter.com/neutralthoughts) - Twitter + +## Contributions + +* Thanks to Cactus([https://github.com/cactus](https://github.com/cactus)) for creating the blog feed diff --git a/_site/pygments/about.html b/_site/pygments/about.html new file mode 100644 index 00000000..d3da6bf2 --- /dev/null +++ b/_site/pygments/about.html @@ -0,0 +1,83 @@ + + + + + About Backbone Tutorials - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+
+
+ home + about + contribute + contact + subscribe +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+

About Backbone Tutorials

+

As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial.

+

I started this site to not only consolidate my understanding of backbone.js but to also document what I have learned thus far for myself and others.

+ + + +
+ +
+
+ + + + + diff --git a/_site/pygments/atom.xml b/_site/pygments/atom.xml new file mode 100644 index 00000000..2fbf3c7d --- /dev/null +++ b/_site/pygments/atom.xml @@ -0,0 +1,381 @@ + + + + Backbone Tutorials + + + 2011-04-18T18:03:50+10:00 + http://backbonetutorials.com/ + + Thomas Davis + thomasalwyndavis@gmail.com + + + + + Why would you use backbone.js? + + 2011-02-01T00:00:00+10:00 + http://backbonetutorials.com/why-would-you-use-backbone + <h2>Why do you need backbone.js?</h2> +<p>Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools. The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete <span class="caps">DOM</span> elements.</p> +<p>I shouldn&#8217;t need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of implement your own way of structuring your application but you miss out on the benefits of the open source community.</p> +<h3>So how does backbone.js help?</h3> +<p>Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to backbone.js light nature you can incrementally include it in any current or future projects.</p> +<h3>Relevant Links</h3> +<ul> + <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> + <li><a href="http://news.ycombinator.com/item?id=2119704">great hackernews discussion /w post from author</a></li> +</ul> + + + + What is a model? + + 2011-01-29T00:00:00+10:00 + http://backbonetutorials.com/what-is-a-model + <h2>What is a model?</h2> +<p>Across the internet the definition of <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller"><span class="caps">MVC</span></a> is so diluted that it&#8217;s hard to tell what exactly your model should be doing. The authors of backbone.js have quite a clear definition of what they believe the model represents in backbone.js.</p> +<blockquote> +<p>Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.</p> +</blockquote> +<p>So for the purpose of the tutorial let&#8217;s create a model.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> +</code></pre> +</div><p>So <em>initialize()</em> is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don&#8217;t have to include it in your model declaration but you will find yourself using it more often than not.</p> +<h4>Setting attributes</h4> +<p>Now we want to pass some parameters when we create an instance of our model.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> + <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> + <span class="c1">// or we can set afterwards, these operations are equivelent</span> + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">();</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> + +</code></pre> +</div><p>So passing a javascript object to our constructor is the same as calling <em>model.set()</em>. Now that these models have attributes set we need to be able to retrieve them.</p> +<h4>Getting attributes</h4> +<p>Using the <em>model.get()</em> method we can access model properties at anytime.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + + <span class="kd">var</span> <span class="nx">age</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> + <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">);</span> <span class="c1">// &quot;Thomas&quot;</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> + +</code></pre> +</div><h4>Setting model defaults</h4> +<p>Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name &#8216;defaults&#8217; in your model declaration.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> + <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> + <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + + <span class="kd">var</span> <span class="nx">age</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> + <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">);</span> <span class="c1">// &quot;Thomas&quot;</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> + +</code></pre> +</div><h4>Manipulating model attributes</h4> +<p>Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> + <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> + <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">},</span> + <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> + <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> + <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">&#39;John Resig&#39;</span><span class="p">);</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;, &#39;John Resig&#39;]</span> + +</code></pre> +</div><p>So we can implement methods to get/set and perform other calculations using attributes from our model at any time.</p> +<h4>Listening for changes to the model</h4> +<p>Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case every time we adopt a new kid we are going to throw a party.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> + <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> + <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;change:children&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;More children, single parenting is great!&quot;</span><span class="p">);</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;, &#39;Stewie Griffin&#39;]</span> + <span class="p">});</span> + <span class="p">},</span> + <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> + <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> + <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">&#39;Stewie Griffin&#39;</span><span class="p">);</span> <span class="c1">// This triggers a change and will alert()</span> + +</code></pre> +</div><p>So we can bind the a change listener to individual attributes or if we like simply &#8216;<em>this.bind(&#8220;change&#8221;, function(){});</em>&#8217; to listen for changes to all attributes of the model.</p> +<h4>Fetching, Saving and Destroying</h4> +<p>Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.</p> +<h4>Tips and Tricks</h4> +<p><strong>Get all the current attributes</strong></p> +<div class="highlight"><pre><code class="javascript"> + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span> <span class="c1">// { name: &quot;Thomas&quot;, age: 67, children: [&#39;Ryan&#39;]}</span> + <span class="cm">/* This simply returns a copy of the current attributes. */</span> + <span class="k">delete</span> <span class="nx">attributes</span><span class="p">;</span> + <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">attributes</span><span class="p">;</span> + <span class="cm">/* The line above gives a direct reference to the attributes and you should be careful when playing with it. Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */</span> +</code></pre> +</div><p><strong>Validate data before you set or save it</strong></p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="c1">// If you return a string from the validate function,</span> + <span class="c1">// Backbone will throw an error</span> + <span class="nx">validate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">attributes</span> <span class="p">){</span> + <span class="k">if</span><span class="p">(</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">age</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">name</span> <span class="o">!=</span> <span class="s2">&quot;Dr Manhatten&quot;</span> <span class="p">){</span> + <span class="k">return</span> <span class="s2">&quot;You can&#39;t be negative years old&quot;</span><span class="p">;</span> + <span class="p">}</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;error&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">error</span><span class="p">){</span> + <span class="c1">// We have received an error, log it, alert it or forget it :)</span> + <span class="nx">alert</span><span class="p">(</span> <span class="nx">error</span> <span class="p">);</span> + <span class="p">});</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Mary Poppins&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="p">});</span> + <span class="c1">// Will trigger an alert outputting the error</span> + <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Dr Manhatten&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="p">});</span> + <span class="c1">// God have mercy on our souls</span> + +</code></pre> +</div><h3>Relevant Links</h3> +<ul> + <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> +</ul> +<h3>Author</h3> +<ul> + <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> +</ul> +<h3>Contributors</h3> +<ul> + <li><a href="https://github.com/utkarshkukreti">Utkarsh Kukreti</a></li> +</ul> + + + + What is a view? + + 2011-01-28T00:00:00+10:00 + http://backbonetutorials.com/what-is-a-view + <h2>What is a view?</h2> +<p>Backbone views are used reflect what your applications data model looks like. They are also used to listen to events and react accordingly. This tutorial will not be addressing binding models/collections with views. This tutorial will focus on view functionality and how to use it with a javascript templating library.</p> +<p>We will be using jQuery 1.5.1 as our <span class="caps">DOM</span> manipulator.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> <span class="o">/</span><span class="nx">ch</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> +</code></pre> +</div><p>So <em>initialize()</em> is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don&#8217;t have to include it in your model declaration but you will find yourself using it more often than not.</p> +<h4>Setting attributes</h4> +<p>Now we want to pass some parameters when we create an instance of our model.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> + <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> + <span class="c1">// or we can set afterwards, these operations are equivelent</span> + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">();</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> + +</code></pre> +</div><p>So passing a javascript object to our constructor is the same as calling <em>model.set()</em>. Now that these models have attributes set we need to be able to retrieve them.</p> +<h4>Getting attributes</h4> +<p>Using the <em>model.get()</em> method we can access model properties at anytime.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + + <span class="kd">var</span> <span class="nx">age</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> + <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">);</span> <span class="c1">// &quot;Thomas&quot;</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> + +</code></pre> +</div><h4>Setting model defaults</h4> +<p>Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name &#8216;defaults&#8217; in your model declaration.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> + <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> + <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + + <span class="kd">var</span> <span class="nx">age</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> + <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">);</span> <span class="c1">// &quot;Thomas&quot;</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> + +</code></pre> +</div><h4>Manipulating model attributes</h4> +<p>Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> + <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> + <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">},</span> + <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> + <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> + <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">&#39;John Resig&#39;</span><span class="p">);</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;, &#39;John Resig&#39;]</span> + +</code></pre> +</div><p>So we can implement methods to get/set and perform other calculations using attributes from our model at any time.</p> +<h4>Listening for changes to the model</h4> +<p>Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case every time we adopt a new kid we are going to throw a party.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> + <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> + <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;change:children&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;More children, single parenting is great!&quot;</span><span class="p">);</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;, &#39;Stewie Griffin&#39;]</span> + <span class="p">});</span> + <span class="p">},</span> + <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> + <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> + <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">&#39;Stewie Griffin&#39;</span><span class="p">);</span> <span class="c1">// This triggers a change and will alert()</span> + +</code></pre> +</div><p>So we can bind the a change listener to individual attributes or if we like simply &#8216;<em>this.bind(&#8220;change&#8221;, function(){});</em>&#8217; to listen for changes to all attributes of the model.</p> +<h4>Fetching, Saving and Destroying</h4> +<p>Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.</p> +<h4>Tips and Tricks</h4> +<p><strong>Get all the current attributes</strong></p> +<div class="highlight"><pre><code class="javascript"> + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">;</span> <span class="c1">// { name: &quot;Thomas&quot;, age: 67, children: [&#39;Ryan&#39;]}</span> + <span class="cm">/* This simply returns a copy of the current attributes. */</span> + <span class="k">delete</span> <span class="nx">attributes</span><span class="p">;</span> + <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">attributes</span><span class="p">;</span> + <span class="cm">/* The line above gives a direct reference to the attributes and you should be careful when playing with it. Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */</span> +</code></pre> +</div><p><strong>Validate data before you set or save it</strong></p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="c1">// If you return a string from the validate function,</span> + <span class="c1">// Backbone will throw an error</span> + <span class="nx">validate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">attributes</span> <span class="p">){</span> + <span class="k">if</span><span class="p">(</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">age</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">name</span> <span class="o">!=</span> <span class="s2">&quot;Dr Manhatten&quot;</span> <span class="p">){</span> + <span class="k">return</span> <span class="s2">&quot;You can&#39;t be negative years old&quot;</span><span class="p">;</span> + <span class="p">}</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;error&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">error</span><span class="p">){</span> + <span class="c1">// We have received an error, log it, alert it or forget it :)</span> + <span class="nx">alert</span><span class="p">(</span> <span class="nx">error</span> <span class="p">);</span> + <span class="p">});</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Mary Poppins&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="p">});</span> + <span class="c1">// Will trigger an alert outputting the error</span> + <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Dr Manhatten&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="p">});</span> + <span class="c1">// God have mercy on our souls</span> + +</code></pre> +</div><h3>Relevant Links</h3> +<ul> + <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> +</ul> +<h3>Author</h3> +<ul> + <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> +</ul> +<h3>Contributors</h3> +<ul> + <li>None</li> +</ul> + + + diff --git a/_site/pygments/contact.html b/_site/pygments/contact.html new file mode 100644 index 00000000..e1ad82a3 --- /dev/null +++ b/_site/pygments/contact.html @@ -0,0 +1,82 @@ + + + + + Contact - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+
+
+ home + about + contribute + contact + subscribe +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+

Contact

+

You can contact the original owner of this site through github or via twitter(@neutralthoughts).

+ + + +
+ +
+
+ + + + + diff --git a/_site/pygments/contribute.html b/_site/pygments/contribute.html new file mode 100644 index 00000000..60470465 --- /dev/null +++ b/_site/pygments/contribute.html @@ -0,0 +1,83 @@ + + + + + Contribute - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+
+
+ home + about + contribute + contact + subscribe +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+

Contribute

+

The main goal behind BackboneTutorials.com is to build a comprehensive guide for developers of all levels of experience. Discussion and debate are encouraged and will hopefully breed innovation for javascript applications.

+

All contributions will be well acknowledge on the site.

+ + + +
+ +
+
+ + + + + diff --git a/_site/pygments/css/reset.css b/_site/pygments/css/reset.css new file mode 100644 index 00000000..5b41bb7b --- /dev/null +++ b/_site/pygments/css/reset.css @@ -0,0 +1,260 @@ +/** + * HTML5 ✰ Boilerplate + * + * style.css contains a reset, font normalization and some base styles. + * + * Credit is left where credit is due. + * Much inspiration was taken from these projects: + * - yui.yahooapis.com/2.8.1/build/base/base.css + * - camendesign.com/design/ + * - praegnanz.de/weblog/htmlcssjs-kickstart + */ + + +/** + * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) + * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark + * html5doctor.com/html-5-reset-stylesheet/ + */ + +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +blockquote, q { quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { content: ""; content: none; } + +ins { background-color: #ff9; color: #000; text-decoration: none; } + +mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } + +del { text-decoration: line-through; } + +abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } + +table { border-collapse: collapse; border-spacing: 0; } + +hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } + +input, select { vertical-align: middle; } + + +/** + * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/ + */ + +body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */ +select, input, textarea, button { font:99% sans-serif; } + +/* Normalize monospace sizing: + en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ +pre, code, kbd, samp { font-family: monospace, sans-serif; } + + +/** + * Minimal base styles. + */ + +/* Always force a scrollbar in non-IE */ +html { overflow-y: scroll; } + +/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ +a:hover, a:active { outline: none; } + +ul, ol { margin-left: 2em; } +ol { list-style-type: decimal; } + +/* Remove margins for navigation lists */ +nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } + +small { font-size: 85%; } +strong, th { font-weight: bold; } + +td { vertical-align: top; } + +/* Set sub, sup without affecting line-height: gist.github.com/413930 */ +sub, sup { font-size: 75%; line-height: 0; position: relative; } +sup { top: -0.5em; } +sub { bottom: -0.25em; } + +pre { + /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ + white-space: pre; white-space: pre-wrap; word-wrap: break-word; + padding: 15px; +} + +textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */ + +.ie6 legend, .ie7 legend { margin-left: -7px; } + +/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ +input[type="radio"] { vertical-align: text-bottom; } +input[type="checkbox"] { vertical-align: bottom; } +.ie7 input[type="checkbox"] { vertical-align: baseline; } +.ie6 input { vertical-align: text-bottom; } + +/* Hand cursor on clickable input elements */ +label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } + +/* Webkit browsers add a 2px margin outside the chrome of form elements */ +button, input, select, textarea { margin: 0; } + +/* Colors for form validity */ +input:valid, textarea:valid { } +input:invalid, textarea:invalid { + border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; +} +.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } + + +/* These selection declarations have to be separate + No text-shadow: twitter.com/miketaylr/status/12228805301 + Also: hot pink! */ +::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } +::selection { background:#FF5E99; color:#fff; text-shadow: none; } + +/* j.mp/webkit-tap-highlight-color */ +a:link { -webkit-tap-highlight-color: #FF5E99; } + +/* Make buttons play nice in IE: + www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ +button { width: auto; overflow: visible; } + +/* Bicubic resizing for non-native sized IMG: + code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ +.ie7 img { -ms-interpolation-mode: bicubic; } + +/** + * You might tweak these.. + */ + +body, select, input, textarea { + /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ + color: #444; + /* Set your base font here, to apply evenly */ + /* font-family: Georgia, serif; */ +} + +/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */ +h1, h2, h3, h4, h5, h6 { font-weight: bold; } + +a, a:active, a:visited { color: #607890; } +a:hover { color: #036; } + + +/** + * Primary styles + * + * Author: + */ + + + + + + + + + + + + + + + + +/** + * Non-semantic helper classes: please define your styles before this section. + */ + +/* For image replacement */ +.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } + +/* Hide for both screenreaders and browsers: + css-discuss.incutio.com/wiki/Screenreader_Visibility */ +.hidden { display: none; visibility: hidden; } + +/* Hide only visually, but have it available for screenreaders: by Jon Neal. + www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ +.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } +/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } + +/* Hide visually and from screenreaders, but maintain layout */ +.invisible { visibility: hidden; } + +/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. + j.mp/bestclearfix */ +.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } +.clearfix:after { clear: both; } +/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ +.clearfix { zoom: 1; } + + + +/** + * Media queries for responsive design. + * + * These follow after primary styles so they will successfully override. + */ + +@media all and (orientation:portrait) { + /* Style adjustments for portrait mode goes here */ + +} + +@media all and (orientation:landscape) { + /* Style adjustments for landscape mode goes here */ + +} + +/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) + consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ +@media screen and (max-device-width: 480px) { + + + /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */ + /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ +} + + +/** + * Print styles. + * + * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ + */ +@media print { + * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; + -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ + a, a:visited { color: #444 !important; text-decoration: underline; } + a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { content: " (" attr(title) ")"; } + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ + tr, img { page-break-inside: avoid; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3{ page-break-after: avoid; } +} diff --git a/_site/pygments/css/ribbon.css b/_site/pygments/css/ribbon.css new file mode 100644 index 00000000..580b9d3c --- /dev/null +++ b/_site/pygments/css/ribbon.css @@ -0,0 +1,115 @@ +@font-face { + font-family: Collegiate; + src: url("Collegiate.ttf"); +} + +.ribbon-holder { + position: absolute; + top: 0; + overflow: hidden; + height: 10em; +} + +.right.ribbon-holder { + right: 0; +} + +.left.ribbon-holder { + left: 0; +} + +.ribbon, +.ribbon:hover { + text-decoration: none; +} + +.ribbon { + font-family: Collegiate, sans-serif; + letter-spacing: -.1px; + opacity: 0.95; + + padding: 0.25em 0; + position: relative; + top: 2.5em; + + /* Defaults friendly for white pages. */ + -moz-box-shadow: 0 0 13px #888; + -webkit-box-shadow: 0 0 13px #888; + color: #FFF; + display: block; + line-height: 1.35em; +} + +.ribbon .text { + padding: 0.1em 3em; +} + +.right .ribbon { + -moz-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + right: -2.6em; +} + +.left .ribbon { + -moz-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + left: -2.6em; +} + +.white.ribbon { + color: #111; + background-color: #F5F5F5; + background: -webkit-gradient(linear, left bottom, left top, from(#f3f3f3), to(#fff)); + -moz-box-shadow: 0 0 13px #999; + -webkit-box-shadow: 0 0 13px #999; + text-shadow: 0 0 .05em; +} + +.white.ribbon .text { + border: 1px solid #cecece; +} + +.red.ribbon { + background-color: #9a0000; + background: -webkit-gradient(linear, left bottom, left top, from(#9a0000), to(#a90000)); +} + +.red.ribbon .text { + border: 1px solid #bf6060; +} + +.green.ribbon { + background-color: #006e00; + background: -webkit-gradient(linear, left bottom, left top, from(#006e00), to(#007200)); +} + +.green.ribbon .text { + border: 1px solid #6bac6b; +} + +.darkblue.ribbon { + background-color: #121621; + color: #ecedee; +} + +.darkblue.ribbon .text { + border: 1px solid #53565e; +} + +.orange.ribbon { + background-color: #E57504; + background: -webkit-gradient(linear, left bottom, left top, from(#dc7202), to(#ee7906)); +} + +.orange.ribbon .text { + border: 1px solid #ebaa65; +} + +.gray.ribbon { + background-color: #6d6d6d; + background: -webkit-gradient(linear, left bottom, left top, from(#6a6a6a) to(#6d6d6d)); +} + +.gray.ribbon .text { + border: 1px solid #a4a4a4; +} diff --git a/_site/pygments/css/stacklayout.css b/_site/pygments/css/stacklayout.css new file mode 100644 index 00000000..149a432f --- /dev/null +++ b/_site/pygments/css/stacklayout.css @@ -0,0 +1,96 @@ +/* +* StackLayout by Campbell McGuiness +* +* http://stacklayout.com/ +* http://twitter.com/stacklayout +* http://www.decalcms.com/ +* http://workingsoftware.com.au/ +* +* This work is licensed under Creative Commons * Attribution-ShareAlike 3.0 Australia License * http://creativecommons.org/licenses/by-sa/3.0/au/ +* +* Please retain this credit and let us know if you use StackLayout for inclusion on http://stacklayout.com/who.html +* +* cam@workingsoftware.com.au +*/ +.stack, +.stack1of2, +.stack1of3, +.stack2of3, +.stack1of4, +.stack3of4, +.stack1of5, +.stack2of5, +.stack3of5, +.stack4of5, +.stackAuto +{ + display:inline-block; + font-family:'Courier New',monospace; + letter-spacing:-0.65em; + word-spacing:-0.65em; + text-align:center; + vertical-align:top; +} +.stackContent +{ + display:block; + letter-spacing:normal; + word-spacing:normal; + text-align:left; +} +.stackContent:after +{ + content:"."; + display:block; + height:0; + clear:both; + visibility:hidden; +} +.stackAuto .stackContent +{ + text-align:center; +} +.stackAuto +{ + width:auto; +} +.stack +{ + width:100%; +} +.stack1of2 +{ + width:50%; +} +.stack1of3 +{ + width:33.334%; +} +.stack2of3 +{ + width:66.667%; +} +.stack1of4 +{ + width:25%; +} +.stack3of4 +{ + width:75%; +} +.stack1of5 +{ + width:20%; +} +.stack2of5 +{ + width:40%; +} +.stack3of5 +{ + width:60%; +} +.stack4of5 +{ + width:80%; +} diff --git a/_site/pygments/css/style.css b/_site/pygments/css/style.css new file mode 100644 index 00000000..d9a8e4e2 --- /dev/null +++ b/_site/pygments/css/style.css @@ -0,0 +1,81 @@ + +body { font:1em/1.625em "lucida grande","lucida sans unicode", sans-serif; background-color:#FFFEF0; +font-size-adjust:none; +font-style:normal; +font-variant:normal; +font-weight:normal; +} + +p { padding:0 0 0.8125em 0; color:#111; font-weight:300;} + +p + p { text-indent:1.625em;} + +p.first:first-letter{ float:left;font-family: baskerville,"palatino linotype",serif;font-size:3em;font-weight:700;line-height:1em;margin-bottom:-0.2em;padding:0.2em 0.1em 0 0; } +p img { float: left; margin: 0.5em 0.8125em 0.8125em 0; padding: 0; } +p img.right { float: right; margin: 0.5em 0 0.8125em 0.8125em } + + +h1,h2{ font-weight:normal; color: #333; font-family:Georgia, serif; } +h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, serif; } + + +h1 { font-size: 2.125em; margin-bottom: 0.765em; } +h2 { font-size: 1.9em; margin-bottom: 0.855em; } +h3 { font-size: 1.7em; margin-bottom: 0.956em; } +h4 { font-size: 1.4em; margin-bottom: 1.161em; } +h5,h6 { font-size: 1.313em; margin-bottom: 1.238em; } + + + +ul{list-style-position:outside;} +li ul, +li ol { margin:0 1.625em; } +ul, ol { margin: 0 0 1.625em 0; } + + +dl { margin: 0 0 1.625em 0; } +dl dt { font-weight: bold; } +dl dd { margin-left: 1.625em; } + +a { color:#005AF2; text-decoration:none; } +a:hover { text-decoration: underline; } + + +table { margin-bottom:1.625em; border-collapse: collapse; } +th { font-weight:bold; } +tr,th,td { margin:0; padding:0 1.625em 0 1em; height:26px; } +tfoot { font-style: italic; } +caption { text-align:center; font-family:Georgia, serif; } + + +abbr, acronym { border-bottom:1px dotted #000; } +address { margin-top:1.625em; font-style: italic; } +del {color:#000;} + + +blockquote { padding:1em 1em 1.625em 1em; font-family:georgia,serif;font-style: italic; margin-bottom: 20px;} +blockquote:before { content:"\201C";font-size:3em;margin-left:-.625em; font-family:georgia,serif;color:#aaa;line-height:0;}/* From Tripoli */ +blockquote:after { content:"\201D";font-size:3em;margin-right:0px; font-family:georgia,serif;color:#aaa;line-height:0;margin-top: 25px;float: right;}/* From Tripoli */ +blockquote > p {padding:0; margin:0; } + +strong { font-weight: bold; } +em, dfn { font-style: italic; } +dfn { font-weight: bold; } +pre, code { margin: 1.625em 0; white-space: pre; } +pre, code, tt { font: 1em monospace; line-height: 1.5; } +tt { display: block; margin: 1.625em 0; } +hr { margin-bottom:1.625em; } + + + +.oldbook { font-family:"Warnock Pro","Goudy Old Style","Book Antiqua","Palatino",Georgia,serif; } +.note { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; margin:0.1em; color:#333; } +.mono { font-family:"Courier New", Courier, monospace; } + +.tutorials { + list-style: none; + margin-left: 20px; +} +ul { + margin-left: 20px; +} diff --git a/_site/pygments/css/syntax.css b/_site/pygments/css/syntax.css new file mode 100644 index 00000000..2774b764 --- /dev/null +++ b/_site/pygments/css/syntax.css @@ -0,0 +1,60 @@ +.highlight { background: #ffffff; } +.highlight .c { color: #999988; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .k { font-weight: bold } /* Keyword */ +.highlight .o { font-weight: bold } /* Operator */ +.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ +.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #999999 } /* Generic.Heading */ +.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { font-weight: bold } /* Keyword.Constant */ +.highlight .kd { font-weight: bold } /* Keyword.Declaration */ +.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #d14 } /* Literal.String */ +.highlight .na { color: #008080 } /* Name.Attribute */ +.highlight .nb { color: #0086B3 } /* Name.Builtin */ +.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ +.highlight .no { color: #008080 } /* Name.Constant */ +.highlight .ni { color: #800080 } /* Name.Entity */ +.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nn { color: #555555 } /* Name.Namespace */ +.highlight .nt { color: #000080 } /* Name.Tag */ +.highlight .nv { color: #008080 } /* Name.Variable */ +.highlight .ow { font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #d14 } /* Literal.String.Backtick */ +.highlight .sc { color: #d14 } /* Literal.String.Char */ +.highlight .sd { color: #d14 } /* Literal.String.Doc */ +.highlight .s2 { color: #d14 } /* Literal.String.Double */ +.highlight .se { color: #d14 } /* Literal.String.Escape */ +.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ +.highlight .si { color: #d14 } /* Literal.String.Interpol */ +.highlight .sx { color: #d14 } /* Literal.String.Other */ +.highlight .sr { color: #009926 } /* Literal.String.Regex */ +.highlight .s1 { color: #d14 } /* Literal.String.Single */ +.highlight .ss { color: #990073 } /* Literal.String.Symbol */ +.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #008080 } /* Name.Variable.Class */ +.highlight .vg { color: #008080 } /* Name.Variable.Global */ +.highlight .vi { color: #008080 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ diff --git a/_site/pygments/index.html b/_site/pygments/index.html new file mode 100644 index 00000000..b442da1d --- /dev/null +++ b/_site/pygments/index.html @@ -0,0 +1,113 @@ + + + + + - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+
+
+ home + about + contribute + contact + subscribe +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+

Beginner

+ + +

Intermediate

+
    +
  • Coming Soon
    • +
+ +

Advanced

+
    +
  • Coming Soon
    • +
+


+

External Tutorials

+ + + + + +
+ +
+
+ + + + + diff --git a/_site/pygments/what-is-a-model/index.html b/_site/pygments/what-is-a-model/index.html new file mode 100644 index 00000000..8570c1a0 --- /dev/null +++ b/_site/pygments/what-is-a-model/index.html @@ -0,0 +1,261 @@ + + + + + What is a model? - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+
+
+ home + about + contribute + contact + subscribe +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+
+

What is a model?

+

Across the internet the definition of MVC is so diluted that it’s hard to tell what exactly your model should be doing. The authors of backbone.js have quite a clear definition of what they believe the model represents in backbone.js.

+
+

Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.

+
+

So for the purpose of the tutorial let’s create a model.

+
    Person = Backbone.Model.extend({
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person;
+
+

So initialize() is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don’t have to include it in your model declaration but you will find yourself using it more often than not.

+

Setting attributes

+

Now we want to pass some parameters when we create an instance of our model.

+
    Person = Backbone.Model.extend({
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67});
+    delete person;
+    // or we can set afterwards, these operations are equivelent
+    var person = new Person();
+    person.set({ name: "Thomas", age: 67});
+    
+
+

So passing a javascript object to our constructor is the same as calling model.set(). Now that these models have attributes set we need to be able to retrieve them.

+

Getting attributes

+

Using the model.get() method we can access model properties at anytime.

+
    Person = Backbone.Model.extend({
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    
+    var age = person.get("age"); // 67
+    var name = person.get("name"); // "Thomas"
+    var children = person.get("children"); // ['Ryan']
+    
+
+

Setting model defaults

+

Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name ‘defaults’ in your model declaration.

+
    Person = Backbone.Model.extend({
+        defaults: {
+            name: 'Fetus',
+            age: 0,
+            children: []
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    
+    var age = person.get("age"); // 67
+    var name = person.get("name"); // "Thomas"
+    var children = person.get("children"); // ['Ryan']
+    
+
+

Manipulating model attributes

+

Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.

+
    Person = Backbone.Model.extend({
+        defaults: {
+            name: 'Fetus',
+            age: 0,
+            children: []
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+        },
+        adopt: function( newChildsName ){
+            var children_array = this.get("children");
+            children_array.push( newChildsName );
+            this.set({ children: children_array });
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    person.adopt('John Resig');
+    var children = person.get("children"); // ['Ryan', 'John Resig']
+    
+
+

So we can implement methods to get/set and perform other calculations using attributes from our model at any time.

+

Listening for changes to the model

+

Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case every time we adopt a new kid we are going to throw a party.

+
    Person = Backbone.Model.extend({
+        defaults: {
+            name: 'Fetus',
+            age: 0,
+            children: []
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+            this.bind("change:children", function(){
+                alert("More children, single parenting is great!");
+                var children = this.get("children"); // ['Ryan', 'Stewie Griffin']
+            });
+        },
+        adopt: function( newChildsName ){
+            var children_array = this.get("children");
+            children_array.push( newChildsName );
+            this.set({ children: children_array });
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    person.adopt('Stewie Griffin'); // This triggers a change and will alert()
+    
+
+

So we can bind the a change listener to individual attributes or if we like simply ‘this.bind(“change”, function(){});’ to listen for changes to all attributes of the model.

+

Fetching, Saving and Destroying

+

Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.

+

Tips and Tricks

+

Get all the current attributes

+
      
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    var attributes = person.toJSON(); // { name: "Thomas", age: 67, children: ['Ryan']}
+    /* This simply returns a copy of the current attributes. */
+    delete attributes;
+    var attributes = person.attributes;
+    /* The line above gives a direct reference to the attributes and you should be careful when playing with it.   Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */
+
+

Validate data before you set or save it

+
    Person = Backbone.Model.extend({
+        // If you return a string from the validate function,
+        // Backbone will throw an error
+        validate: function( attributes ){
+            if( attributes.age < 0 && attributes.name != "Dr Manhatten" ){
+                return "You can't be negative years old";
+            }
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+            this.bind("error", function(model, error){
+                // We have received an error, log it, alert it or forget it :)
+                alert( error );
+            });
+        }
+    });
+    
+    var person = new Person;
+    person.set({ name: "Mary Poppins", age: -1 }); 
+    // Will trigger an alert outputting the error
+    delete person;
+    
+    var person = new Person;
+    person.set({ name: "Dr Manhatten", age: -1 });
+    // God have mercy on our souls
+    
+
+

Relevant Links

+ +

Author

+ +

Contributors

+ +
+ + + +
+ + + + +
+ +
+ + + + + + diff --git a/_site/pygments/what-is-a-view/index.html b/_site/pygments/what-is-a-view/index.html new file mode 100644 index 00000000..0cd2f728 --- /dev/null +++ b/_site/pygments/what-is-a-view/index.html @@ -0,0 +1,257 @@ + + + + + What is a view? - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+
+
+ home + about + contribute + contact + subscribe +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+
+

What is a view?

+

Backbone views are used reflect what your applications data model looks like. They are also used to listen to events and react accordingly. This tutorial will not be addressing binding models/collections with views. This tutorial will focus on view functionality and how to use it with a javascript templating library.

+

We will be using jQuery 1.5.1 as our DOM manipulator.

+
    Person = Backbone.Model.extend({
+        initialize: function(){
+            alert("Welcome to this world");
+        }   /ch
+    });
+    
+    var person = new Person;
+
+

So initialize() is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don’t have to include it in your model declaration but you will find yourself using it more often than not.

+

Setting attributes

+

Now we want to pass some parameters when we create an instance of our model.

+
    Person = Backbone.Model.extend({
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67});
+    delete person;
+    // or we can set afterwards, these operations are equivelent
+    var person = new Person();
+    person.set({ name: "Thomas", age: 67});
+    
+
+

So passing a javascript object to our constructor is the same as calling model.set(). Now that these models have attributes set we need to be able to retrieve them.

+

Getting attributes

+

Using the model.get() method we can access model properties at anytime.

+
    Person = Backbone.Model.extend({
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    
+    var age = person.get("age"); // 67
+    var name = person.get("name"); // "Thomas"
+    var children = person.get("children"); // ['Ryan']
+    
+
+

Setting model defaults

+

Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name ‘defaults’ in your model declaration.

+
    Person = Backbone.Model.extend({
+        defaults: {
+            name: 'Fetus',
+            age: 0,
+            children: []
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    
+    var age = person.get("age"); // 67
+    var name = person.get("name"); // "Thomas"
+    var children = person.get("children"); // ['Ryan']
+    
+
+

Manipulating model attributes

+

Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.

+
    Person = Backbone.Model.extend({
+        defaults: {
+            name: 'Fetus',
+            age: 0,
+            children: []
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+        },
+        adopt: function( newChildsName ){
+            var children_array = this.get("children");
+            children_array.push( newChildsName );
+            this.set({ children: children_array });
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    person.adopt('John Resig');
+    var children = person.get("children"); // ['Ryan', 'John Resig']
+    
+
+

So we can implement methods to get/set and perform other calculations using attributes from our model at any time.

+

Listening for changes to the model

+

Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case every time we adopt a new kid we are going to throw a party.

+
    Person = Backbone.Model.extend({
+        defaults: {
+            name: 'Fetus',
+            age: 0,
+            children: []
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+            this.bind("change:children", function(){
+                alert("More children, single parenting is great!");
+                var children = this.get("children"); // ['Ryan', 'Stewie Griffin']
+            });
+        },
+        adopt: function( newChildsName ){
+            var children_array = this.get("children");
+            children_array.push( newChildsName );
+            this.set({ children: children_array });
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    person.adopt('Stewie Griffin'); // This triggers a change and will alert()
+    
+
+

So we can bind the a change listener to individual attributes or if we like simply ‘this.bind(“change”, function(){});’ to listen for changes to all attributes of the model.

+

Fetching, Saving and Destroying

+

Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.

+

Tips and Tricks

+

Get all the current attributes

+
      
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    var attributes = person.toJSON; // { name: "Thomas", age: 67, children: ['Ryan']}
+    /* This simply returns a copy of the current attributes. */
+    delete attributes;
+    var attributes = person.attributes;
+    /* The line above gives a direct reference to the attributes and you should be careful when playing with it.   Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */
+
+

Validate data before you set or save it

+
    Person = Backbone.Model.extend({
+        // If you return a string from the validate function,
+        // Backbone will throw an error
+        validate: function( attributes ){
+            if( attributes.age < 0 && attributes.name != "Dr Manhatten" ){
+                return "You can't be negative years old";
+            }
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+            this.bind("error", function(model, error){
+                // We have received an error, log it, alert it or forget it :)
+                alert( error );
+            });
+        }
+    });
+    
+    var person = new Person;
+    person.set({ name: "Mary Poppins", age: -1 }); 
+    // Will trigger an alert outputting the error
+    delete person;
+    
+    var person = new Person;
+    person.set({ name: "Dr Manhatten", age: -1 });
+    // God have mercy on our souls
+    
+
+

Relevant Links

+ +

Author

+ +

Contributors

+
    +
  • None
    • +
+
+ + + +
+ + + + +
+ +
+ + + + + + diff --git a/_site/pygments/why-would-you-use-backbone/index.html b/_site/pygments/why-would-you-use-backbone/index.html new file mode 100644 index 00000000..73a5b4a5 --- /dev/null +++ b/_site/pygments/why-would-you-use-backbone/index.html @@ -0,0 +1,101 @@ + + + + + Why would you use backbone.js? - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+
+
+ home + about + contribute + contact + subscribe +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+
+

Why do you need backbone.js?

+

Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools. The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete DOM elements.

+

I shouldn’t need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of implement your own way of structuring your application but you miss out on the benefits of the open source community.

+

So how does backbone.js help?

+

Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to backbone.js light nature you can incrementally include it in any current or future projects.

+

Relevant Links

+ +
+ + + +
+ + + + +
+ +
+ + + + + + diff --git a/_site/what-is-a-collection/index.html b/_site/what-is-a-collection/index.html new file mode 100644 index 00000000..ed7d8116 --- /dev/null +++ b/_site/what-is-a-collection/index.html @@ -0,0 +1,188 @@ + + + + + + What is a collection? - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+ + + + +
+
+ home + examples + contribute + about + subscribe + chat +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+
+

In progress

+

What is a collection?

+

Backbone collections are simply an ordered set of models. Such that it can be used in situations such as;

+
    +
  • Model: Student, Collection: ClassStudents
    • +
  • Model: Todo Item, Collection: Todo List
    • +
  • Model: Animals, Collection: Zoo
    • +
+

Typically your collection will only use one type of model but models themselves are not limited to a type of collection;

+
    +
  • Model: Student, Collection: Gym Class
    • +
  • Model: Student, Collection: Art Class
    • +
  • Model: Student, Collection: English Class
    • +
+

Here is a generic Model/Collection example.

+
    var Song = Backbone.Model.extend({
+        initialize: function(){
+            console.log("Music is the answer");
+        }
+    });
+    
+    var Album = Backbone.Collection.extend({
+		model: Song
+	});
+
+
+

Building a collection

+

Now we are going to populate a creation with some useful data.

+
    var Song = Backbone.Model.extend({
+		defaults: {
+			name: "Not specified",
+			artist: "Not specified"
+		},
+        initialize: function(){
+            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]
+	
+
+
+

So how does Backbone.js help?

+

Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to Backbone.js light nature you can incrementally include it in any current or future projects.

+

Relevant Links

+ +

Author

+ +

Contributors

+ +
+ +
+ + + +
+ + + + + +
+ + + + +
+ +
+ + + + + + diff --git a/_site/what-is-a-model/index.html b/_site/what-is-a-model/index.html new file mode 100644 index 00000000..5be8b542 --- /dev/null +++ b/_site/what-is-a-model/index.html @@ -0,0 +1,296 @@ + + + + + + What is a model? - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+ + + + +
+
+ home + examples + contribute + about + subscribe + chat +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+
+

What is a model?

+

Across the internet the definition of MVC is so diluted that it’s hard to tell what exactly your model should be doing. The authors of backbone.js have quite a clear definition of what they believe the model represents in backbone.js.

+
+

Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.

+
+

So for the purpose of the tutorial let’s create a model.

+
    Person = Backbone.Model.extend({
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person;
+
+
+

So initialize() is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don’t have to include it in your model declaration but you will find yourself using it more often than not.

+

Setting attributes

+

Now we want to pass some parameters when we create an instance of our model.

+
    Person = Backbone.Model.extend({
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67});
+    delete person;
+    // or we can set afterwards, these operations are equivelent
+    var person = new Person();
+    person.set({ name: "Thomas", age: 67});
+    
+
+
+

So passing a javascript object to our constructor is the same as calling model.set(). Now that these models have attributes set we need to be able to retrieve them.

+

Getting attributes

+

Using the model.get() method we can access model properties at anytime.

+
    Person = Backbone.Model.extend({
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    
+    var age = person.get("age"); // 67
+    var name = person.get("name"); // "Thomas"
+    var children = person.get("children"); // ['Ryan']
+    
+
+
+

Setting model defaults

+

Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name ‘defaults’ in your model declaration.

+
    Person = Backbone.Model.extend({
+        defaults: {
+            name: 'Fetus',
+            age: 0,
+            children: []
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    
+    var age = person.get("age"); // 67
+    var name = person.get("name"); // "Thomas"
+    var children = person.get("children"); // ['Ryan']
+    
+
+
+

Manipulating model attributes

+

Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.

+
    Person = Backbone.Model.extend({
+        defaults: {
+            name: 'Fetus',
+            age: 0,
+            children: []
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+        },
+        adopt: function( newChildsName ){
+            var children_array = this.get("children");
+            children_array.push( newChildsName );
+            this.set({ children: children_array });
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    person.adopt('John Resig');
+    var children = person.get("children"); // ['Ryan', 'John Resig']
+    
+
+
+

So we can implement methods to get/set and perform other calculations using attributes from our model at any time.

+

Listening for changes to the model

+

Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case if the name of our “person” changes we will alert their new name.

+
    Person = Backbone.Model.extend({
+        defaults: {
+            name: 'Fetus',
+            age: 0,
+            children: []
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+            this.bind("change:name", function(){
+                var name = this.get("name"); // 'Stewie Griffin'
+                alert("Changed my name to " + name );
+            });
+        },
+        changeName: function( name ){
+            this.set({ name: name });
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    person.changeName('Stewie Griffin'); // This triggers a change and will alert()
+
+
+

So we can bind the a change listener to individual attributes or if we like simply ‘this.bind(“change”, function(){});’ to listen for changes to all attributes of the model.

+

Fetching, Saving and Destroying

+

Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.

+

Tips and Tricks

+

Get all the current attributes

+
      
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    var attributes = person.toJSON(); // { name: "Thomas", age: 67, children: ['Ryan']}
+    /* This simply returns a copy of the current attributes. */
+    delete attributes;
+    var attributes = person.attributes;
+    /* The line above gives a direct reference to the attributes and you should be careful when playing with it.   Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */
+
+
+

Validate data before you set or save it

+
    Person = Backbone.Model.extend({
+        // If you return a string from the validate function,
+        // Backbone will throw an error
+        validate: function( attributes ){
+            if( attributes.age < 0 && attributes.name != "Dr Manhatten" ){
+                return "You can't be negative years old";
+            }
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+            this.bind("error", function(model, error){
+                // We have received an error, log it, alert it or forget it :)
+                alert( error );
+            });
+        }
+    });
+    
+    var person = new Person;
+    person.set({ name: "Mary Poppins", age: -1 }); 
+    // Will trigger an alert outputting the error
+    delete person;
+    
+    var person = new Person;
+    person.set({ name: "Dr Manhatten", age: -1 });
+    // God have mercy on our souls
+    
+
+
+

Relevant Links

+ +

Author

+ +

Contributors

+ +
+ +
+ + + +
+ + + + + +
+ + + + +
+ +
+ + + + + + diff --git a/_site/what-is-a-router/index.html b/_site/what-is-a-router/index.html new file mode 100644 index 00000000..bbe87716 --- /dev/null +++ b/_site/what-is-a-router/index.html @@ -0,0 +1,219 @@ + + + + + + What is a router? - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+ + + + +
+
+ home + examples + contribute + about + subscribe + chat +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+
+

What is a router?

+

Backbone routers are used for routing your applications URL’s when using hash tags(#). In the traditional MVC sense they don’t neccesarily fit the semantics and if you have read “What is a view?” it will elaborate on this point. Though a Backbone “router” is still very useful for any application/feature that needs URL routing/history capabilities.

+

Defined routers should always contain at least one route and a function to map the particular route to. In the example below we are going to define a route that is always called.

+

Also note that routes intepret anything after “#” tag in the url. All links in your application should target “#/action” or “#action”. (Appending a forward slash after the hashtag looks a bit nicer e.g. http://example.com/#/user/help)

+
<script>
+    var AppRouter = Backbone.Router.extend({
+        routes: {
+            "*actions": "defaultRoute" // matches http://example.com/#anything-here
+        },
+        defaultRoute: function( actions ){
+            // The variable passed in matches the variable in the route definition "actions"
+            alert( actions ); 
+        }
+    });
+    // Initiate the router
+    var app_router = new AppRouter;
+    // Start Backbone history a neccesary step for bookmarkable URL's
+    Backbone.history.start();
+
+</script>
+
+<a href="#action">Activate route</a>
+<a href="#/route/action">Activate another route</a>
+<!-- Notice the change in the url -->
+
+
+

Please note: * Prior to Backbone 0.5 (released 1. July 2011) Routes was originally called Controllers. Due to clearity developers on the Backbone team renamed it to Routes. Hence, if you find yourself using an older version of Backbone you should write Backbone.Controller.extend({ * });

+

Dynamic Routing

+

Most conventional frameworks allow you to define routes that contain a mix of static and dynamic route parameters. For example you might want to retrieve a post with a variable id with a friendly URL string. Such that your URL would look like “http://example.com/#/posts/12”. Once this route was activated you would want to access the id given in the URL string. This example is implemented below.

+
<script>
+    var AppRouter = Backbone.Router.extend({
+        routes: {
+            "/posts/:id": "getPost",
+            "*actions": "defaultRoute" // Backbone will try match the route above first
+        },
+        getPost: function( id ) {
+            // Note the variable in the route definition being passed in here
+            alert( "Get post number " + id );   
+        },
+        defaultRoute: function( actions ){
+            alert( actions ); 
+        }
+    });
+    // Instantiate the router
+    var app_router = new AppRouter;
+    // Start Backbone history a neccesary step for bookmarkable URL's
+    Backbone.history.start();
+
+</script>
+
+<a href="#/posts/120">Post 120</a>
+<a href="#/posts/130">Post 130</a>
+<!-- Notice the change in the url -->
+
+
+

Dynamic Routing Cont. “:params” and “*splats”

+

Backbone uses two styles of variables when implementing routes. First there are “:params” which match any URL components between slashes. Then there are “*splats” which match any number of URL components. Note that due to the nature of a “*splat” it will always be the last variable in your URL as it will match any and all components.

+

Any “*splats” or “:params” in route definitions are passed as variables respective order to the associated function. A route defined as “/:route/:action” will pass 2 variables(route, action) to the call back function. Which can be accessed with “function( route, action )”. (If this is confusing please post a comment and I will try articulate it better)

+

Here are some examples of using “:params” and “*splats”

+
        routes: {
+        
+            "/posts/:id": "getPost",
+            // <a href="http://example.com/#/posts/121">Example</a>
+            
+            "/download/*path": "downloadFile",
+            // <a href="http://example.com/#/download/user/images/hey.gif">Download</a>
+            
+            "/:route/:action": "loadView",
+            // <a href="http://example.com/#/dashboard/graph">Load Route/Action View</a>
+            
+        },
+        
+        getPost: function( id ){ alert(id); /* 121 */ },
+        downloadFile: function( path ){ alert(path); /* user/images/hey.gif */ },
+        loadView: function( route, action ){ 
+            alert(route + "_" + action); 
+            /* dashboard_graph */ 
+        }
+
+
+

Routes are quite powerful and in an ideal world your application should never contain too many. If you need to implement hash tags with SEO in mind, do a google search for “google seo hashbangs”.

+

Remember to do a pull request for any errors you come across.

+

Tips and Tricks

+

No Tips and Tricks

+

Relevant Links

+ +

Author

+ +

Contributors

+ +
+ +
+ + + +
+ + + + + +
+ + + + +
+ +
+ + + + + + diff --git a/_site/what-is-a-view/index.html b/_site/what-is-a-view/index.html new file mode 100644 index 00000000..b1e9ab18 --- /dev/null +++ b/_site/what-is-a-view/index.html @@ -0,0 +1,268 @@ + + + + + + What is a view? - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+ + + + +
+
+ home + examples + contribute + about + subscribe + chat +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+
+

What is a view?

+

Backbone views are used to reflect what your applications’ data models look like. They are also used to listen to events and react accordingly. This tutorial will not be addressing how to bind models and collections to views but will focus on view functionality and how to use views with a JavaScript templating library, specifically Underscore.js’s _.template.

+

We will be using jQuery 1.5 as our DOM manipulator. It’s possible to use other libraries such as MooTools or Sizzle, but official Backbone.js documentation endorses jQuery. Backbone.View events may not work with other libraries other than jQuery.

+

For the purposes of this demonstration, we will be implementing a search box. A live example can be found on jsFiddle.

+
    SearchView = Backbone.View.extend({
+        initialize: function(){
+            alert("Alerts suck.");
+        }
+    });
+
+    // The initialize function is always called when instantiating a Backbone View.
+    // Consider it the constructor of the class.
+    var search_view = new SearchView;
+
+
+

The “el” property

+

The “el” property references the DOM object created in the browser. Every Backbone.js view has an “el” property, and if it not defined, Backbone.js will construct its own, which is an empty div element.

+

Let us set our view’s “el” property to div#search_container, effectively making Backbone.View the owner of the DOM element.

+
<div id="search_container"></div>
+
+<script type="text/javascript">
+	SearchView = Backbone.View.extend({
+		initialize: function(){
+			alert("Alerts suck.");
+		}
+	});
+	
+	var search_view = new SearchView({ el: $("#search_container") });
+</script>
+
+
+

Note: Keep in mind that this binds the container element. Any events we trigger must be in this element.

+

Loading a template

+

Backbone.js is dependent on Underscore.js, which includes its own micro-templating solution. Refer to Underscore.js’s documentation for more information.

+

Let us implement a “render()” function and call it when the view is initialized. The “render()” function will load our template into the view’s “el” property using jQuery.

+
<div id="search_container"></div>
+
+<script type="text/javascript">
+	SearchView = Backbone.View.extend({
+		initialize: function(){
+			this.render();
+		},
+		render: function(){
+			// Compile the template using underscore
+			var template = _.template( $("#search_template").html(), {} );
+			// Load the compiled HTML into the Backbone "el"
+			this.el.html( template );
+		}
+	});
+	
+	var search_view = new SearchView({ el: $("#search_container") });
+</script>
+
+<script type="text/template" id="search_template">
+	<label>Search</label>
+	<input type="text" id="search_input" />
+	<input type="button" id="search_button" value="Search" />
+</script>
+
+
+

Tip: Place all your templates in a file and serve them from a CDN. This ensures your users will always have your application cached.

+

Listening for events

+

To attach a listener to our view, we use the “events” attribute of Backbone.View. Remember that event listeners can only be attached to child elements of the “el” property. Let us attach a “click” listener to our button.

+
<div id="search_container"></div>
+
+<script type="text/javascript">
+    SearchView = Backbone.View.extend({
+        initialize: function(){
+            this.render();
+        },
+        render: function(){
+            var template = _.template( $("#search_template").html(), {} );
+            this.el.html( template );
+        },
+        events: {
+            "click input[type=button]": "doSearch"
+        },
+        doSearch: function( event ){
+            // Button clicked, you can access the element that was clicked with event.currentTarget
+            alert( "Search for " + $("#search_input").val() );
+        }
+    });
+
+    var search_view = new SearchView({ el: $("#search_container") });
+</script>
+
+<script type="text/template" id="search_template">
+	<label>Search</label>
+	<input type="text" id="search_input" />
+	<input type="button" id="search_button" value="Search" />
+</script>
+
+
+

Tips and Tricks

+

Using template variables

+
<div id="search_container"></div>
+
+<script type="text/javascript">
+	 SearchView = Backbone.View.extend({
+		initialize: function(){
+			this.render();
+		},
+		render: function(){
+			//Pass variables in using Underscore.js Template
+			var variables = { search_label: "My Search" };
+			// Compile the template using underscore
+			var template = _.template( $("#search_template").html(), variables );
+			// Load the compiled HTML into the Backbone "el"
+			this.el.html( template );
+		},
+		events: {
+			"click input[type=button]": "doSearch"  
+		},
+		doSearch: function( event ){
+			// Button clicked, you can access the element that was clicked with event.currentTarget
+			alert( "Search for " + $("#search_input").val() );
+		}
+	});
+		
+	var search_view = new SearchView({ el: $("#search_container") });
+</script>
+
+<script type="text/template" id="search_template">
+    <!-- Access template variables with <%= %> -->
+    <label><%= search_label %></label>
+    <input type="text" id="search_input" />
+    <input type="button" id="search_button" value="Search" />
+</script>
+
+
+

If you have any questions, leave a comment below.

+

Relevant Links

+ +

Author

+ +

Contributors

+ +
+ +
+ + + +
+ + + + + +
+ + + + +
+ +
+ + + + + + diff --git a/_site/why-would-you-use-backbone/index.html b/_site/why-would-you-use-backbone/index.html new file mode 100644 index 00000000..f359ba2a --- /dev/null +++ b/_site/why-would-you-use-backbone/index.html @@ -0,0 +1,140 @@ + + + + + + Why would you use Backbone.js? - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+ + + + +
+
+ home + examples + contribute + about + subscribe + chat +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+
+

Why do you need Backbone.js?

+

Building single-page web apps or complicated user interfaces will get extremely difficult by simply using jQuery or MooTools. The problem is standard JavaScript libraries are great at what they do – and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete DOM elements.

+

I shouldn’t need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of implement your own way of structuring your application but you miss out on the benefits of the open source community.

+

So how does Backbone.js help?

+

Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to Backbone.js light nature you can incrementally include it in any current or future projects.

+

Relevant Links

+ +

Author

+ +

Contributors

+ +
+ +
+ + + +
+ + + + + +
+ + + + +
+ +
+ + + + + + diff --git a/about.textile b/about.textile new file mode 100644 index 00000000..c421fbd7 --- /dev/null +++ b/about.textile @@ -0,0 +1,14 @@ +--- +layout: default +title: About Backbone Tutorials +--- + +h2. About Backbone Tutorials + +p. As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial. + +I started this site to not only consolidate my understanding of backbone.js but to also document what I have learned thus far for myself and others. + +p. You can contact the original owner of this site through "github":https://github.com/thomasdavis or via twitter("@neutralthoughts":http://twitter.com/neutralthoughts). You can also find me at #cdnjs on freenode.net. + + diff --git a/atom.xml b/atom.xml new file mode 100644 index 00000000..b6f1968b --- /dev/null +++ b/atom.xml @@ -0,0 +1,26 @@ +--- +layout: nil +--- + + + + Backbone Tutorials + + + {{ site.time | date_to_xmlschema }} + http://backbonetutorials.com/ + + Thomas Davis + thomasalwyndavis@gmail.com + + + {% for post in site.posts limit:10 %} + + {{ post.title }} + + {{ post.date | date_to_xmlschema }} + http://backbonetutorials.com{{ post.id }} + {{ post.content | xml_escape }} + + {% endfor %} + diff --git a/chat.textile b/chat.textile new file mode 100644 index 00000000..c5a873f2 --- /dev/null +++ b/chat.textile @@ -0,0 +1,7 @@ +--- +layout: default +title: Chat +--- +

+#cdnjs on irc.freenode.net, don't forget to follow me on twitter.

+ diff --git a/contact.textile b/contact.textile new file mode 100644 index 00000000..c80ab394 --- /dev/null +++ b/contact.textile @@ -0,0 +1,9 @@ +--- +layout: default +title: Contact +--- + +h2. Contact + +p. You can contact the original owner of this site through "github":https://github.com/thomasdavis or via twitter("@neutralthoughts":http://twitter.com/neutralthoughts). + diff --git a/contribute.textile b/contribute.textile new file mode 100644 index 00000000..2a61a829 --- /dev/null +++ b/contribute.textile @@ -0,0 +1,10 @@ +--- +layout: default +title: Contribute +--- + +h2. Contribute + +p. The main goal behind BackboneTutorials.com is to build a comprehensive guide for developers of all levels of experience. Discussion and debate are encouraged and will hopefully breed innovation for javascript applications. + +All contributions will be well acknowledged on the site. diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 00000000..5b41bb7b --- /dev/null +++ b/css/reset.css @@ -0,0 +1,260 @@ +/** + * HTML5 ✰ Boilerplate + * + * style.css contains a reset, font normalization and some base styles. + * + * Credit is left where credit is due. + * Much inspiration was taken from these projects: + * - yui.yahooapis.com/2.8.1/build/base/base.css + * - camendesign.com/design/ + * - praegnanz.de/weblog/htmlcssjs-kickstart + */ + + +/** + * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) + * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark + * html5doctor.com/html-5-reset-stylesheet/ + */ + +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +blockquote, q { quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { content: ""; content: none; } + +ins { background-color: #ff9; color: #000; text-decoration: none; } + +mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } + +del { text-decoration: line-through; } + +abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } + +table { border-collapse: collapse; border-spacing: 0; } + +hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } + +input, select { vertical-align: middle; } + + +/** + * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/ + */ + +body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */ +select, input, textarea, button { font:99% sans-serif; } + +/* Normalize monospace sizing: + en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ +pre, code, kbd, samp { font-family: monospace, sans-serif; } + + +/** + * Minimal base styles. + */ + +/* Always force a scrollbar in non-IE */ +html { overflow-y: scroll; } + +/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ +a:hover, a:active { outline: none; } + +ul, ol { margin-left: 2em; } +ol { list-style-type: decimal; } + +/* Remove margins for navigation lists */ +nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } + +small { font-size: 85%; } +strong, th { font-weight: bold; } + +td { vertical-align: top; } + +/* Set sub, sup without affecting line-height: gist.github.com/413930 */ +sub, sup { font-size: 75%; line-height: 0; position: relative; } +sup { top: -0.5em; } +sub { bottom: -0.25em; } + +pre { + /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ + white-space: pre; white-space: pre-wrap; word-wrap: break-word; + padding: 15px; +} + +textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */ + +.ie6 legend, .ie7 legend { margin-left: -7px; } + +/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ +input[type="radio"] { vertical-align: text-bottom; } +input[type="checkbox"] { vertical-align: bottom; } +.ie7 input[type="checkbox"] { vertical-align: baseline; } +.ie6 input { vertical-align: text-bottom; } + +/* Hand cursor on clickable input elements */ +label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } + +/* Webkit browsers add a 2px margin outside the chrome of form elements */ +button, input, select, textarea { margin: 0; } + +/* Colors for form validity */ +input:valid, textarea:valid { } +input:invalid, textarea:invalid { + border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; +} +.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } + + +/* These selection declarations have to be separate + No text-shadow: twitter.com/miketaylr/status/12228805301 + Also: hot pink! */ +::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } +::selection { background:#FF5E99; color:#fff; text-shadow: none; } + +/* j.mp/webkit-tap-highlight-color */ +a:link { -webkit-tap-highlight-color: #FF5E99; } + +/* Make buttons play nice in IE: + www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ +button { width: auto; overflow: visible; } + +/* Bicubic resizing for non-native sized IMG: + code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ +.ie7 img { -ms-interpolation-mode: bicubic; } + +/** + * You might tweak these.. + */ + +body, select, input, textarea { + /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ + color: #444; + /* Set your base font here, to apply evenly */ + /* font-family: Georgia, serif; */ +} + +/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */ +h1, h2, h3, h4, h5, h6 { font-weight: bold; } + +a, a:active, a:visited { color: #607890; } +a:hover { color: #036; } + + +/** + * Primary styles + * + * Author: + */ + + + + + + + + + + + + + + + + +/** + * Non-semantic helper classes: please define your styles before this section. + */ + +/* For image replacement */ +.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } + +/* Hide for both screenreaders and browsers: + css-discuss.incutio.com/wiki/Screenreader_Visibility */ +.hidden { display: none; visibility: hidden; } + +/* Hide only visually, but have it available for screenreaders: by Jon Neal. + www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ +.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } +/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } + +/* Hide visually and from screenreaders, but maintain layout */ +.invisible { visibility: hidden; } + +/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. + j.mp/bestclearfix */ +.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } +.clearfix:after { clear: both; } +/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ +.clearfix { zoom: 1; } + + + +/** + * Media queries for responsive design. + * + * These follow after primary styles so they will successfully override. + */ + +@media all and (orientation:portrait) { + /* Style adjustments for portrait mode goes here */ + +} + +@media all and (orientation:landscape) { + /* Style adjustments for landscape mode goes here */ + +} + +/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) + consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ +@media screen and (max-device-width: 480px) { + + + /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */ + /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ +} + + +/** + * Print styles. + * + * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ + */ +@media print { + * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; + -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ + a, a:visited { color: #444 !important; text-decoration: underline; } + a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { content: " (" attr(title) ")"; } + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ + tr, img { page-break-inside: avoid; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3{ page-break-after: avoid; } +} diff --git a/css/ribbon.css b/css/ribbon.css new file mode 100644 index 00000000..580b9d3c --- /dev/null +++ b/css/ribbon.css @@ -0,0 +1,115 @@ +@font-face { + font-family: Collegiate; + src: url("Collegiate.ttf"); +} + +.ribbon-holder { + position: absolute; + top: 0; + overflow: hidden; + height: 10em; +} + +.right.ribbon-holder { + right: 0; +} + +.left.ribbon-holder { + left: 0; +} + +.ribbon, +.ribbon:hover { + text-decoration: none; +} + +.ribbon { + font-family: Collegiate, sans-serif; + letter-spacing: -.1px; + opacity: 0.95; + + padding: 0.25em 0; + position: relative; + top: 2.5em; + + /* Defaults friendly for white pages. */ + -moz-box-shadow: 0 0 13px #888; + -webkit-box-shadow: 0 0 13px #888; + color: #FFF; + display: block; + line-height: 1.35em; +} + +.ribbon .text { + padding: 0.1em 3em; +} + +.right .ribbon { + -moz-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + right: -2.6em; +} + +.left .ribbon { + -moz-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + left: -2.6em; +} + +.white.ribbon { + color: #111; + background-color: #F5F5F5; + background: -webkit-gradient(linear, left bottom, left top, from(#f3f3f3), to(#fff)); + -moz-box-shadow: 0 0 13px #999; + -webkit-box-shadow: 0 0 13px #999; + text-shadow: 0 0 .05em; +} + +.white.ribbon .text { + border: 1px solid #cecece; +} + +.red.ribbon { + background-color: #9a0000; + background: -webkit-gradient(linear, left bottom, left top, from(#9a0000), to(#a90000)); +} + +.red.ribbon .text { + border: 1px solid #bf6060; +} + +.green.ribbon { + background-color: #006e00; + background: -webkit-gradient(linear, left bottom, left top, from(#006e00), to(#007200)); +} + +.green.ribbon .text { + border: 1px solid #6bac6b; +} + +.darkblue.ribbon { + background-color: #121621; + color: #ecedee; +} + +.darkblue.ribbon .text { + border: 1px solid #53565e; +} + +.orange.ribbon { + background-color: #E57504; + background: -webkit-gradient(linear, left bottom, left top, from(#dc7202), to(#ee7906)); +} + +.orange.ribbon .text { + border: 1px solid #ebaa65; +} + +.gray.ribbon { + background-color: #6d6d6d; + background: -webkit-gradient(linear, left bottom, left top, from(#6a6a6a) to(#6d6d6d)); +} + +.gray.ribbon .text { + border: 1px solid #a4a4a4; +} diff --git a/css/stacklayout.css b/css/stacklayout.css new file mode 100644 index 00000000..149a432f --- /dev/null +++ b/css/stacklayout.css @@ -0,0 +1,96 @@ +/* +* StackLayout by Campbell McGuiness +* +* http://stacklayout.com/ +* http://twitter.com/stacklayout +* http://www.decalcms.com/ +* http://workingsoftware.com.au/ +* +* This work is licensed under Creative Commons * Attribution-ShareAlike 3.0 Australia License * http://creativecommons.org/licenses/by-sa/3.0/au/ +* +* Please retain this credit and let us know if you use StackLayout for inclusion on http://stacklayout.com/who.html +* +* cam@workingsoftware.com.au +*/ +.stack, +.stack1of2, +.stack1of3, +.stack2of3, +.stack1of4, +.stack3of4, +.stack1of5, +.stack2of5, +.stack3of5, +.stack4of5, +.stackAuto +{ + display:inline-block; + font-family:'Courier New',monospace; + letter-spacing:-0.65em; + word-spacing:-0.65em; + text-align:center; + vertical-align:top; +} +.stackContent +{ + display:block; + letter-spacing:normal; + word-spacing:normal; + text-align:left; +} +.stackContent:after +{ + content:"."; + display:block; + height:0; + clear:both; + visibility:hidden; +} +.stackAuto .stackContent +{ + text-align:center; +} +.stackAuto +{ + width:auto; +} +.stack +{ + width:100%; +} +.stack1of2 +{ + width:50%; +} +.stack1of3 +{ + width:33.334%; +} +.stack2of3 +{ + width:66.667%; +} +.stack1of4 +{ + width:25%; +} +.stack3of4 +{ + width:75%; +} +.stack1of5 +{ + width:20%; +} +.stack2of5 +{ + width:40%; +} +.stack3of5 +{ + width:60%; +} +.stack4of5 +{ + width:80%; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..d9a8e4e2 --- /dev/null +++ b/css/style.css @@ -0,0 +1,81 @@ + +body { font:1em/1.625em "lucida grande","lucida sans unicode", sans-serif; background-color:#FFFEF0; +font-size-adjust:none; +font-style:normal; +font-variant:normal; +font-weight:normal; +} + +p { padding:0 0 0.8125em 0; color:#111; font-weight:300;} + +p + p { text-indent:1.625em;} + +p.first:first-letter{ float:left;font-family: baskerville,"palatino linotype",serif;font-size:3em;font-weight:700;line-height:1em;margin-bottom:-0.2em;padding:0.2em 0.1em 0 0; } +p img { float: left; margin: 0.5em 0.8125em 0.8125em 0; padding: 0; } +p img.right { float: right; margin: 0.5em 0 0.8125em 0.8125em } + + +h1,h2{ font-weight:normal; color: #333; font-family:Georgia, serif; } +h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, serif; } + + +h1 { font-size: 2.125em; margin-bottom: 0.765em; } +h2 { font-size: 1.9em; margin-bottom: 0.855em; } +h3 { font-size: 1.7em; margin-bottom: 0.956em; } +h4 { font-size: 1.4em; margin-bottom: 1.161em; } +h5,h6 { font-size: 1.313em; margin-bottom: 1.238em; } + + + +ul{list-style-position:outside;} +li ul, +li ol { margin:0 1.625em; } +ul, ol { margin: 0 0 1.625em 0; } + + +dl { margin: 0 0 1.625em 0; } +dl dt { font-weight: bold; } +dl dd { margin-left: 1.625em; } + +a { color:#005AF2; text-decoration:none; } +a:hover { text-decoration: underline; } + + +table { margin-bottom:1.625em; border-collapse: collapse; } +th { font-weight:bold; } +tr,th,td { margin:0; padding:0 1.625em 0 1em; height:26px; } +tfoot { font-style: italic; } +caption { text-align:center; font-family:Georgia, serif; } + + +abbr, acronym { border-bottom:1px dotted #000; } +address { margin-top:1.625em; font-style: italic; } +del {color:#000;} + + +blockquote { padding:1em 1em 1.625em 1em; font-family:georgia,serif;font-style: italic; margin-bottom: 20px;} +blockquote:before { content:"\201C";font-size:3em;margin-left:-.625em; font-family:georgia,serif;color:#aaa;line-height:0;}/* From Tripoli */ +blockquote:after { content:"\201D";font-size:3em;margin-right:0px; font-family:georgia,serif;color:#aaa;line-height:0;margin-top: 25px;float: right;}/* From Tripoli */ +blockquote > p {padding:0; margin:0; } + +strong { font-weight: bold; } +em, dfn { font-style: italic; } +dfn { font-weight: bold; } +pre, code { margin: 1.625em 0; white-space: pre; } +pre, code, tt { font: 1em monospace; line-height: 1.5; } +tt { display: block; margin: 1.625em 0; } +hr { margin-bottom:1.625em; } + + + +.oldbook { font-family:"Warnock Pro","Goudy Old Style","Book Antiqua","Palatino",Georgia,serif; } +.note { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; margin:0.1em; color:#333; } +.mono { font-family:"Courier New", Courier, monospace; } + +.tutorials { + list-style: none; + margin-left: 20px; +} +ul { + margin-left: 20px; +} diff --git a/css/syntax.css b/css/syntax.css new file mode 100644 index 00000000..2774b764 --- /dev/null +++ b/css/syntax.css @@ -0,0 +1,60 @@ +.highlight { background: #ffffff; } +.highlight .c { color: #999988; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .k { font-weight: bold } /* Keyword */ +.highlight .o { font-weight: bold } /* Operator */ +.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ +.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #999999 } /* Generic.Heading */ +.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { font-weight: bold } /* Keyword.Constant */ +.highlight .kd { font-weight: bold } /* Keyword.Declaration */ +.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #d14 } /* Literal.String */ +.highlight .na { color: #008080 } /* Name.Attribute */ +.highlight .nb { color: #0086B3 } /* Name.Builtin */ +.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ +.highlight .no { color: #008080 } /* Name.Constant */ +.highlight .ni { color: #800080 } /* Name.Entity */ +.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nn { color: #555555 } /* Name.Namespace */ +.highlight .nt { color: #000080 } /* Name.Tag */ +.highlight .nv { color: #008080 } /* Name.Variable */ +.highlight .ow { font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #d14 } /* Literal.String.Backtick */ +.highlight .sc { color: #d14 } /* Literal.String.Char */ +.highlight .sd { color: #d14 } /* Literal.String.Doc */ +.highlight .s2 { color: #d14 } /* Literal.String.Double */ +.highlight .se { color: #d14 } /* Literal.String.Escape */ +.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ +.highlight .si { color: #d14 } /* Literal.String.Interpol */ +.highlight .sx { color: #d14 } /* Literal.String.Other */ +.highlight .sr { color: #009926 } /* Literal.String.Regex */ +.highlight .s1 { color: #d14 } /* Literal.String.Single */ +.highlight .ss { color: #990073 } /* Literal.String.Symbol */ +.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #008080 } /* Name.Variable.Class */ +.highlight .vg { color: #008080 } /* Name.Variable.Global */ +.highlight .vi { color: #008080 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ diff --git a/examples.textile b/examples.textile new file mode 100644 index 00000000..f872d2c5 --- /dev/null +++ b/examples.textile @@ -0,0 +1,18 @@ +--- +layout: default +title: Contact +--- + +h2. Examples of sites using Backbone.js + +h3. "Protosal.com":http://app.protosal.com + +p. Generate proposals for your clients with ease using predefined templates. Track how often your proposals get accepted or declined and who your best client are. + +_CouchDb and Node.js Backend_ + +h3. "GetFlow.com":http://getflow.com + +p. Flow is a task management app that makes working with your team a breeze. You can see the internals under window.Flow. + + diff --git a/index.html b/index.html new file mode 100644 index 00000000..cd15889c --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ +--- +layout: default +title: +--- +

Beginner

+ + +

Intermediate

+ + +

Advanced

+ +


+

External Tutorials

+ diff --git a/pygments/CNAME b/pygments/CNAME new file mode 100644 index 00000000..0c9de916 --- /dev/null +++ b/pygments/CNAME @@ -0,0 +1 @@ +backbonetutorials.com diff --git a/pygments/README.md b/pygments/README.md new file mode 100644 index 00000000..d0e47f33 --- /dev/null +++ b/pygments/README.md @@ -0,0 +1,15 @@ + +# Backbone Tutorials + +This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome. +About Backbone Tutorials + +As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial + +I started this site to not only consolidate my understanding of backbone.js but to also document what I have learned thus far for myself and others. + +Thomas Davis - [@neutralthoughts](http://twitter.com/neutralthoughts) - Twitter + +## Contributions + +* Thanks to Cactus([https://github.com/cactus](https://github.com/cactus)) for creating the blog feed diff --git a/pygments/about.html b/pygments/about.html new file mode 100644 index 00000000..d3da6bf2 --- /dev/null +++ b/pygments/about.html @@ -0,0 +1,83 @@ + + + + + About Backbone Tutorials - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+
+
+ home + about + contribute + contact + subscribe +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+

About Backbone Tutorials

+

As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial.

+

I started this site to not only consolidate my understanding of backbone.js but to also document what I have learned thus far for myself and others.

+ + + +
+ +
+
+ + + + + diff --git a/pygments/atom.xml b/pygments/atom.xml new file mode 100644 index 00000000..2fbf3c7d --- /dev/null +++ b/pygments/atom.xml @@ -0,0 +1,381 @@ + + + + Backbone Tutorials + + + 2011-04-18T18:03:50+10:00 + http://backbonetutorials.com/ + + Thomas Davis + thomasalwyndavis@gmail.com + + + + + Why would you use backbone.js? + + 2011-02-01T00:00:00+10:00 + http://backbonetutorials.com/why-would-you-use-backbone + <h2>Why do you need backbone.js?</h2> +<p>Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools. The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete <span class="caps">DOM</span> elements.</p> +<p>I shouldn&#8217;t need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of implement your own way of structuring your application but you miss out on the benefits of the open source community.</p> +<h3>So how does backbone.js help?</h3> +<p>Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to backbone.js light nature you can incrementally include it in any current or future projects.</p> +<h3>Relevant Links</h3> +<ul> + <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> + <li><a href="http://news.ycombinator.com/item?id=2119704">great hackernews discussion /w post from author</a></li> +</ul> + + + + What is a model? + + 2011-01-29T00:00:00+10:00 + http://backbonetutorials.com/what-is-a-model + <h2>What is a model?</h2> +<p>Across the internet the definition of <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller"><span class="caps">MVC</span></a> is so diluted that it&#8217;s hard to tell what exactly your model should be doing. The authors of backbone.js have quite a clear definition of what they believe the model represents in backbone.js.</p> +<blockquote> +<p>Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.</p> +</blockquote> +<p>So for the purpose of the tutorial let&#8217;s create a model.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> +</code></pre> +</div><p>So <em>initialize()</em> is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don&#8217;t have to include it in your model declaration but you will find yourself using it more often than not.</p> +<h4>Setting attributes</h4> +<p>Now we want to pass some parameters when we create an instance of our model.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> + <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> + <span class="c1">// or we can set afterwards, these operations are equivelent</span> + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">();</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> + +</code></pre> +</div><p>So passing a javascript object to our constructor is the same as calling <em>model.set()</em>. Now that these models have attributes set we need to be able to retrieve them.</p> +<h4>Getting attributes</h4> +<p>Using the <em>model.get()</em> method we can access model properties at anytime.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + + <span class="kd">var</span> <span class="nx">age</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> + <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">);</span> <span class="c1">// &quot;Thomas&quot;</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> + +</code></pre> +</div><h4>Setting model defaults</h4> +<p>Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name &#8216;defaults&#8217; in your model declaration.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> + <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> + <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + + <span class="kd">var</span> <span class="nx">age</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> + <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">);</span> <span class="c1">// &quot;Thomas&quot;</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> + +</code></pre> +</div><h4>Manipulating model attributes</h4> +<p>Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> + <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> + <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">},</span> + <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> + <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> + <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">&#39;John Resig&#39;</span><span class="p">);</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;, &#39;John Resig&#39;]</span> + +</code></pre> +</div><p>So we can implement methods to get/set and perform other calculations using attributes from our model at any time.</p> +<h4>Listening for changes to the model</h4> +<p>Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case every time we adopt a new kid we are going to throw a party.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> + <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> + <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;change:children&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;More children, single parenting is great!&quot;</span><span class="p">);</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;, &#39;Stewie Griffin&#39;]</span> + <span class="p">});</span> + <span class="p">},</span> + <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> + <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> + <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">&#39;Stewie Griffin&#39;</span><span class="p">);</span> <span class="c1">// This triggers a change and will alert()</span> + +</code></pre> +</div><p>So we can bind the a change listener to individual attributes or if we like simply &#8216;<em>this.bind(&#8220;change&#8221;, function(){});</em>&#8217; to listen for changes to all attributes of the model.</p> +<h4>Fetching, Saving and Destroying</h4> +<p>Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.</p> +<h4>Tips and Tricks</h4> +<p><strong>Get all the current attributes</strong></p> +<div class="highlight"><pre><code class="javascript"> + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span> <span class="c1">// { name: &quot;Thomas&quot;, age: 67, children: [&#39;Ryan&#39;]}</span> + <span class="cm">/* This simply returns a copy of the current attributes. */</span> + <span class="k">delete</span> <span class="nx">attributes</span><span class="p">;</span> + <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">attributes</span><span class="p">;</span> + <span class="cm">/* The line above gives a direct reference to the attributes and you should be careful when playing with it. Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */</span> +</code></pre> +</div><p><strong>Validate data before you set or save it</strong></p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="c1">// If you return a string from the validate function,</span> + <span class="c1">// Backbone will throw an error</span> + <span class="nx">validate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">attributes</span> <span class="p">){</span> + <span class="k">if</span><span class="p">(</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">age</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">name</span> <span class="o">!=</span> <span class="s2">&quot;Dr Manhatten&quot;</span> <span class="p">){</span> + <span class="k">return</span> <span class="s2">&quot;You can&#39;t be negative years old&quot;</span><span class="p">;</span> + <span class="p">}</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;error&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">error</span><span class="p">){</span> + <span class="c1">// We have received an error, log it, alert it or forget it :)</span> + <span class="nx">alert</span><span class="p">(</span> <span class="nx">error</span> <span class="p">);</span> + <span class="p">});</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Mary Poppins&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="p">});</span> + <span class="c1">// Will trigger an alert outputting the error</span> + <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Dr Manhatten&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="p">});</span> + <span class="c1">// God have mercy on our souls</span> + +</code></pre> +</div><h3>Relevant Links</h3> +<ul> + <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> +</ul> +<h3>Author</h3> +<ul> + <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> +</ul> +<h3>Contributors</h3> +<ul> + <li><a href="https://github.com/utkarshkukreti">Utkarsh Kukreti</a></li> +</ul> + + + + What is a view? + + 2011-01-28T00:00:00+10:00 + http://backbonetutorials.com/what-is-a-view + <h2>What is a view?</h2> +<p>Backbone views are used reflect what your applications data model looks like. They are also used to listen to events and react accordingly. This tutorial will not be addressing binding models/collections with views. This tutorial will focus on view functionality and how to use it with a javascript templating library.</p> +<p>We will be using jQuery 1.5.1 as our <span class="caps">DOM</span> manipulator.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> <span class="o">/</span><span class="nx">ch</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> +</code></pre> +</div><p>So <em>initialize()</em> is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don&#8217;t have to include it in your model declaration but you will find yourself using it more often than not.</p> +<h4>Setting attributes</h4> +<p>Now we want to pass some parameters when we create an instance of our model.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> + <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> + <span class="c1">// or we can set afterwards, these operations are equivelent</span> + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">();</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> + +</code></pre> +</div><p>So passing a javascript object to our constructor is the same as calling <em>model.set()</em>. Now that these models have attributes set we need to be able to retrieve them.</p> +<h4>Getting attributes</h4> +<p>Using the <em>model.get()</em> method we can access model properties at anytime.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + + <span class="kd">var</span> <span class="nx">age</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> + <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">);</span> <span class="c1">// &quot;Thomas&quot;</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> + +</code></pre> +</div><h4>Setting model defaults</h4> +<p>Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name &#8216;defaults&#8217; in your model declaration.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> + <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> + <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + + <span class="kd">var</span> <span class="nx">age</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;age&quot;</span><span class="p">);</span> <span class="c1">// 67</span> + <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">);</span> <span class="c1">// &quot;Thomas&quot;</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;]</span> + +</code></pre> +</div><h4>Manipulating model attributes</h4> +<p>Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> + <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> + <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="p">},</span> + <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> + <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> + <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">&#39;John Resig&#39;</span><span class="p">);</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;, &#39;John Resig&#39;]</span> + +</code></pre> +</div><p>So we can implement methods to get/set and perform other calculations using attributes from our model at any time.</p> +<h4>Listening for changes to the model</h4> +<p>Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case every time we adopt a new kid we are going to throw a party.</p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> + <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Fetus&#39;</span><span class="p">,</span> + <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> + <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;change:children&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;More children, single parenting is great!&quot;</span><span class="p">);</span> + <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> <span class="c1">// [&#39;Ryan&#39;, &#39;Stewie Griffin&#39;]</span> + <span class="p">});</span> + <span class="p">},</span> + <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> + <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;children&quot;</span><span class="p">);</span> + <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">&#39;Stewie Griffin&#39;</span><span class="p">);</span> <span class="c1">// This triggers a change and will alert()</span> + +</code></pre> +</div><p>So we can bind the a change listener to individual attributes or if we like simply &#8216;<em>this.bind(&#8220;change&#8221;, function(){});</em>&#8217; to listen for changes to all attributes of the model.</p> +<h4>Fetching, Saving and Destroying</h4> +<p>Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.</p> +<h4>Tips and Tricks</h4> +<p><strong>Get all the current attributes</strong></p> +<div class="highlight"><pre><code class="javascript"> + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Thomas&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Ryan&#39;</span><span class="p">]});</span> + <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">;</span> <span class="c1">// { name: &quot;Thomas&quot;, age: 67, children: [&#39;Ryan&#39;]}</span> + <span class="cm">/* This simply returns a copy of the current attributes. */</span> + <span class="k">delete</span> <span class="nx">attributes</span><span class="p">;</span> + <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">attributes</span><span class="p">;</span> + <span class="cm">/* The line above gives a direct reference to the attributes and you should be careful when playing with it. Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */</span> +</code></pre> +</div><p><strong>Validate data before you set or save it</strong></p> +<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="c1">// If you return a string from the validate function,</span> + <span class="c1">// Backbone will throw an error</span> + <span class="nx">validate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">attributes</span> <span class="p">){</span> + <span class="k">if</span><span class="p">(</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">age</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">name</span> <span class="o">!=</span> <span class="s2">&quot;Dr Manhatten&quot;</span> <span class="p">){</span> + <span class="k">return</span> <span class="s2">&quot;You can&#39;t be negative years old&quot;</span><span class="p">;</span> + <span class="p">}</span> + <span class="p">},</span> + <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;Welcome to this world&quot;</span><span class="p">);</span> + <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;error&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">error</span><span class="p">){</span> + <span class="c1">// We have received an error, log it, alert it or forget it :)</span> + <span class="nx">alert</span><span class="p">(</span> <span class="nx">error</span> <span class="p">);</span> + <span class="p">});</span> + <span class="p">}</span> + <span class="p">});</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Mary Poppins&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="p">});</span> + <span class="c1">// Will trigger an alert outputting the error</span> + <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> + + <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> + <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Dr Manhatten&quot;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="p">});</span> + <span class="c1">// God have mercy on our souls</span> + +</code></pre> +</div><h3>Relevant Links</h3> +<ul> + <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> +</ul> +<h3>Author</h3> +<ul> + <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> +</ul> +<h3>Contributors</h3> +<ul> + <li>None</li> +</ul> + + + diff --git a/pygments/contact.html b/pygments/contact.html new file mode 100644 index 00000000..e1ad82a3 --- /dev/null +++ b/pygments/contact.html @@ -0,0 +1,82 @@ + + + + + Contact - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+
+
+ home + about + contribute + contact + subscribe +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+

Contact

+

You can contact the original owner of this site through github or via twitter(@neutralthoughts).

+ + + +
+ +
+
+ + + + + diff --git a/pygments/contribute.html b/pygments/contribute.html new file mode 100644 index 00000000..60470465 --- /dev/null +++ b/pygments/contribute.html @@ -0,0 +1,83 @@ + + + + + Contribute - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+
+
+ home + about + contribute + contact + subscribe +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+

Contribute

+

The main goal behind BackboneTutorials.com is to build a comprehensive guide for developers of all levels of experience. Discussion and debate are encouraged and will hopefully breed innovation for javascript applications.

+

All contributions will be well acknowledge on the site.

+ + + +
+ +
+
+ + + + + diff --git a/pygments/css/reset.css b/pygments/css/reset.css new file mode 100644 index 00000000..5b41bb7b --- /dev/null +++ b/pygments/css/reset.css @@ -0,0 +1,260 @@ +/** + * HTML5 ✰ Boilerplate + * + * style.css contains a reset, font normalization and some base styles. + * + * Credit is left where credit is due. + * Much inspiration was taken from these projects: + * - yui.yahooapis.com/2.8.1/build/base/base.css + * - camendesign.com/design/ + * - praegnanz.de/weblog/htmlcssjs-kickstart + */ + + +/** + * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) + * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark + * html5doctor.com/html-5-reset-stylesheet/ + */ + +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +blockquote, q { quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { content: ""; content: none; } + +ins { background-color: #ff9; color: #000; text-decoration: none; } + +mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } + +del { text-decoration: line-through; } + +abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } + +table { border-collapse: collapse; border-spacing: 0; } + +hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } + +input, select { vertical-align: middle; } + + +/** + * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/ + */ + +body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */ +select, input, textarea, button { font:99% sans-serif; } + +/* Normalize monospace sizing: + en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ +pre, code, kbd, samp { font-family: monospace, sans-serif; } + + +/** + * Minimal base styles. + */ + +/* Always force a scrollbar in non-IE */ +html { overflow-y: scroll; } + +/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ +a:hover, a:active { outline: none; } + +ul, ol { margin-left: 2em; } +ol { list-style-type: decimal; } + +/* Remove margins for navigation lists */ +nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } + +small { font-size: 85%; } +strong, th { font-weight: bold; } + +td { vertical-align: top; } + +/* Set sub, sup without affecting line-height: gist.github.com/413930 */ +sub, sup { font-size: 75%; line-height: 0; position: relative; } +sup { top: -0.5em; } +sub { bottom: -0.25em; } + +pre { + /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ + white-space: pre; white-space: pre-wrap; word-wrap: break-word; + padding: 15px; +} + +textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */ + +.ie6 legend, .ie7 legend { margin-left: -7px; } + +/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ +input[type="radio"] { vertical-align: text-bottom; } +input[type="checkbox"] { vertical-align: bottom; } +.ie7 input[type="checkbox"] { vertical-align: baseline; } +.ie6 input { vertical-align: text-bottom; } + +/* Hand cursor on clickable input elements */ +label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } + +/* Webkit browsers add a 2px margin outside the chrome of form elements */ +button, input, select, textarea { margin: 0; } + +/* Colors for form validity */ +input:valid, textarea:valid { } +input:invalid, textarea:invalid { + border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; +} +.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } + + +/* These selection declarations have to be separate + No text-shadow: twitter.com/miketaylr/status/12228805301 + Also: hot pink! */ +::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } +::selection { background:#FF5E99; color:#fff; text-shadow: none; } + +/* j.mp/webkit-tap-highlight-color */ +a:link { -webkit-tap-highlight-color: #FF5E99; } + +/* Make buttons play nice in IE: + www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ +button { width: auto; overflow: visible; } + +/* Bicubic resizing for non-native sized IMG: + code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ +.ie7 img { -ms-interpolation-mode: bicubic; } + +/** + * You might tweak these.. + */ + +body, select, input, textarea { + /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ + color: #444; + /* Set your base font here, to apply evenly */ + /* font-family: Georgia, serif; */ +} + +/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */ +h1, h2, h3, h4, h5, h6 { font-weight: bold; } + +a, a:active, a:visited { color: #607890; } +a:hover { color: #036; } + + +/** + * Primary styles + * + * Author: + */ + + + + + + + + + + + + + + + + +/** + * Non-semantic helper classes: please define your styles before this section. + */ + +/* For image replacement */ +.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } + +/* Hide for both screenreaders and browsers: + css-discuss.incutio.com/wiki/Screenreader_Visibility */ +.hidden { display: none; visibility: hidden; } + +/* Hide only visually, but have it available for screenreaders: by Jon Neal. + www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ +.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } +/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } + +/* Hide visually and from screenreaders, but maintain layout */ +.invisible { visibility: hidden; } + +/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. + j.mp/bestclearfix */ +.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } +.clearfix:after { clear: both; } +/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ +.clearfix { zoom: 1; } + + + +/** + * Media queries for responsive design. + * + * These follow after primary styles so they will successfully override. + */ + +@media all and (orientation:portrait) { + /* Style adjustments for portrait mode goes here */ + +} + +@media all and (orientation:landscape) { + /* Style adjustments for landscape mode goes here */ + +} + +/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) + consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ +@media screen and (max-device-width: 480px) { + + + /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */ + /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ +} + + +/** + * Print styles. + * + * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ + */ +@media print { + * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; + -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ + a, a:visited { color: #444 !important; text-decoration: underline; } + a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { content: " (" attr(title) ")"; } + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ + tr, img { page-break-inside: avoid; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3{ page-break-after: avoid; } +} diff --git a/pygments/css/ribbon.css b/pygments/css/ribbon.css new file mode 100644 index 00000000..580b9d3c --- /dev/null +++ b/pygments/css/ribbon.css @@ -0,0 +1,115 @@ +@font-face { + font-family: Collegiate; + src: url("Collegiate.ttf"); +} + +.ribbon-holder { + position: absolute; + top: 0; + overflow: hidden; + height: 10em; +} + +.right.ribbon-holder { + right: 0; +} + +.left.ribbon-holder { + left: 0; +} + +.ribbon, +.ribbon:hover { + text-decoration: none; +} + +.ribbon { + font-family: Collegiate, sans-serif; + letter-spacing: -.1px; + opacity: 0.95; + + padding: 0.25em 0; + position: relative; + top: 2.5em; + + /* Defaults friendly for white pages. */ + -moz-box-shadow: 0 0 13px #888; + -webkit-box-shadow: 0 0 13px #888; + color: #FFF; + display: block; + line-height: 1.35em; +} + +.ribbon .text { + padding: 0.1em 3em; +} + +.right .ribbon { + -moz-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + right: -2.6em; +} + +.left .ribbon { + -moz-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + left: -2.6em; +} + +.white.ribbon { + color: #111; + background-color: #F5F5F5; + background: -webkit-gradient(linear, left bottom, left top, from(#f3f3f3), to(#fff)); + -moz-box-shadow: 0 0 13px #999; + -webkit-box-shadow: 0 0 13px #999; + text-shadow: 0 0 .05em; +} + +.white.ribbon .text { + border: 1px solid #cecece; +} + +.red.ribbon { + background-color: #9a0000; + background: -webkit-gradient(linear, left bottom, left top, from(#9a0000), to(#a90000)); +} + +.red.ribbon .text { + border: 1px solid #bf6060; +} + +.green.ribbon { + background-color: #006e00; + background: -webkit-gradient(linear, left bottom, left top, from(#006e00), to(#007200)); +} + +.green.ribbon .text { + border: 1px solid #6bac6b; +} + +.darkblue.ribbon { + background-color: #121621; + color: #ecedee; +} + +.darkblue.ribbon .text { + border: 1px solid #53565e; +} + +.orange.ribbon { + background-color: #E57504; + background: -webkit-gradient(linear, left bottom, left top, from(#dc7202), to(#ee7906)); +} + +.orange.ribbon .text { + border: 1px solid #ebaa65; +} + +.gray.ribbon { + background-color: #6d6d6d; + background: -webkit-gradient(linear, left bottom, left top, from(#6a6a6a) to(#6d6d6d)); +} + +.gray.ribbon .text { + border: 1px solid #a4a4a4; +} diff --git a/pygments/css/stacklayout.css b/pygments/css/stacklayout.css new file mode 100644 index 00000000..149a432f --- /dev/null +++ b/pygments/css/stacklayout.css @@ -0,0 +1,96 @@ +/* +* StackLayout by Campbell McGuiness +* +* http://stacklayout.com/ +* http://twitter.com/stacklayout +* http://www.decalcms.com/ +* http://workingsoftware.com.au/ +* +* This work is licensed under Creative Commons * Attribution-ShareAlike 3.0 Australia License * http://creativecommons.org/licenses/by-sa/3.0/au/ +* +* Please retain this credit and let us know if you use StackLayout for inclusion on http://stacklayout.com/who.html +* +* cam@workingsoftware.com.au +*/ +.stack, +.stack1of2, +.stack1of3, +.stack2of3, +.stack1of4, +.stack3of4, +.stack1of5, +.stack2of5, +.stack3of5, +.stack4of5, +.stackAuto +{ + display:inline-block; + font-family:'Courier New',monospace; + letter-spacing:-0.65em; + word-spacing:-0.65em; + text-align:center; + vertical-align:top; +} +.stackContent +{ + display:block; + letter-spacing:normal; + word-spacing:normal; + text-align:left; +} +.stackContent:after +{ + content:"."; + display:block; + height:0; + clear:both; + visibility:hidden; +} +.stackAuto .stackContent +{ + text-align:center; +} +.stackAuto +{ + width:auto; +} +.stack +{ + width:100%; +} +.stack1of2 +{ + width:50%; +} +.stack1of3 +{ + width:33.334%; +} +.stack2of3 +{ + width:66.667%; +} +.stack1of4 +{ + width:25%; +} +.stack3of4 +{ + width:75%; +} +.stack1of5 +{ + width:20%; +} +.stack2of5 +{ + width:40%; +} +.stack3of5 +{ + width:60%; +} +.stack4of5 +{ + width:80%; +} diff --git a/pygments/css/style.css b/pygments/css/style.css new file mode 100644 index 00000000..d9a8e4e2 --- /dev/null +++ b/pygments/css/style.css @@ -0,0 +1,81 @@ + +body { font:1em/1.625em "lucida grande","lucida sans unicode", sans-serif; background-color:#FFFEF0; +font-size-adjust:none; +font-style:normal; +font-variant:normal; +font-weight:normal; +} + +p { padding:0 0 0.8125em 0; color:#111; font-weight:300;} + +p + p { text-indent:1.625em;} + +p.first:first-letter{ float:left;font-family: baskerville,"palatino linotype",serif;font-size:3em;font-weight:700;line-height:1em;margin-bottom:-0.2em;padding:0.2em 0.1em 0 0; } +p img { float: left; margin: 0.5em 0.8125em 0.8125em 0; padding: 0; } +p img.right { float: right; margin: 0.5em 0 0.8125em 0.8125em } + + +h1,h2{ font-weight:normal; color: #333; font-family:Georgia, serif; } +h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, serif; } + + +h1 { font-size: 2.125em; margin-bottom: 0.765em; } +h2 { font-size: 1.9em; margin-bottom: 0.855em; } +h3 { font-size: 1.7em; margin-bottom: 0.956em; } +h4 { font-size: 1.4em; margin-bottom: 1.161em; } +h5,h6 { font-size: 1.313em; margin-bottom: 1.238em; } + + + +ul{list-style-position:outside;} +li ul, +li ol { margin:0 1.625em; } +ul, ol { margin: 0 0 1.625em 0; } + + +dl { margin: 0 0 1.625em 0; } +dl dt { font-weight: bold; } +dl dd { margin-left: 1.625em; } + +a { color:#005AF2; text-decoration:none; } +a:hover { text-decoration: underline; } + + +table { margin-bottom:1.625em; border-collapse: collapse; } +th { font-weight:bold; } +tr,th,td { margin:0; padding:0 1.625em 0 1em; height:26px; } +tfoot { font-style: italic; } +caption { text-align:center; font-family:Georgia, serif; } + + +abbr, acronym { border-bottom:1px dotted #000; } +address { margin-top:1.625em; font-style: italic; } +del {color:#000;} + + +blockquote { padding:1em 1em 1.625em 1em; font-family:georgia,serif;font-style: italic; margin-bottom: 20px;} +blockquote:before { content:"\201C";font-size:3em;margin-left:-.625em; font-family:georgia,serif;color:#aaa;line-height:0;}/* From Tripoli */ +blockquote:after { content:"\201D";font-size:3em;margin-right:0px; font-family:georgia,serif;color:#aaa;line-height:0;margin-top: 25px;float: right;}/* From Tripoli */ +blockquote > p {padding:0; margin:0; } + +strong { font-weight: bold; } +em, dfn { font-style: italic; } +dfn { font-weight: bold; } +pre, code { margin: 1.625em 0; white-space: pre; } +pre, code, tt { font: 1em monospace; line-height: 1.5; } +tt { display: block; margin: 1.625em 0; } +hr { margin-bottom:1.625em; } + + + +.oldbook { font-family:"Warnock Pro","Goudy Old Style","Book Antiqua","Palatino",Georgia,serif; } +.note { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; margin:0.1em; color:#333; } +.mono { font-family:"Courier New", Courier, monospace; } + +.tutorials { + list-style: none; + margin-left: 20px; +} +ul { + margin-left: 20px; +} diff --git a/pygments/css/syntax.css b/pygments/css/syntax.css new file mode 100644 index 00000000..2774b764 --- /dev/null +++ b/pygments/css/syntax.css @@ -0,0 +1,60 @@ +.highlight { background: #ffffff; } +.highlight .c { color: #999988; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .k { font-weight: bold } /* Keyword */ +.highlight .o { font-weight: bold } /* Operator */ +.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ +.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #999999 } /* Generic.Heading */ +.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { font-weight: bold } /* Keyword.Constant */ +.highlight .kd { font-weight: bold } /* Keyword.Declaration */ +.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #d14 } /* Literal.String */ +.highlight .na { color: #008080 } /* Name.Attribute */ +.highlight .nb { color: #0086B3 } /* Name.Builtin */ +.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ +.highlight .no { color: #008080 } /* Name.Constant */ +.highlight .ni { color: #800080 } /* Name.Entity */ +.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nn { color: #555555 } /* Name.Namespace */ +.highlight .nt { color: #000080 } /* Name.Tag */ +.highlight .nv { color: #008080 } /* Name.Variable */ +.highlight .ow { font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #d14 } /* Literal.String.Backtick */ +.highlight .sc { color: #d14 } /* Literal.String.Char */ +.highlight .sd { color: #d14 } /* Literal.String.Doc */ +.highlight .s2 { color: #d14 } /* Literal.String.Double */ +.highlight .se { color: #d14 } /* Literal.String.Escape */ +.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ +.highlight .si { color: #d14 } /* Literal.String.Interpol */ +.highlight .sx { color: #d14 } /* Literal.String.Other */ +.highlight .sr { color: #009926 } /* Literal.String.Regex */ +.highlight .s1 { color: #d14 } /* Literal.String.Single */ +.highlight .ss { color: #990073 } /* Literal.String.Symbol */ +.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #008080 } /* Name.Variable.Class */ +.highlight .vg { color: #008080 } /* Name.Variable.Global */ +.highlight .vi { color: #008080 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ diff --git a/pygments/index.html b/pygments/index.html new file mode 100644 index 00000000..b442da1d --- /dev/null +++ b/pygments/index.html @@ -0,0 +1,113 @@ + + + + + - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+
+
+ home + about + contribute + contact + subscribe +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+

Beginner

+ + +

Intermediate

+
    +
  • Coming Soon
    • +
+ +

Advanced

+
    +
  • Coming Soon
    • +
+


+

External Tutorials

+ + + + + +
+ +
+
+ + + + + diff --git a/pygments/what-is-a-model/index.html b/pygments/what-is-a-model/index.html new file mode 100644 index 00000000..8570c1a0 --- /dev/null +++ b/pygments/what-is-a-model/index.html @@ -0,0 +1,261 @@ + + + + + What is a model? - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+
+
+ home + about + contribute + contact + subscribe +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+
+

What is a model?

+

Across the internet the definition of MVC is so diluted that it’s hard to tell what exactly your model should be doing. The authors of backbone.js have quite a clear definition of what they believe the model represents in backbone.js.

+
+

Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.

+
+

So for the purpose of the tutorial let’s create a model.

+
    Person = Backbone.Model.extend({
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person;
+
+

So initialize() is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don’t have to include it in your model declaration but you will find yourself using it more often than not.

+

Setting attributes

+

Now we want to pass some parameters when we create an instance of our model.

+
    Person = Backbone.Model.extend({
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67});
+    delete person;
+    // or we can set afterwards, these operations are equivelent
+    var person = new Person();
+    person.set({ name: "Thomas", age: 67});
+    
+
+

So passing a javascript object to our constructor is the same as calling model.set(). Now that these models have attributes set we need to be able to retrieve them.

+

Getting attributes

+

Using the model.get() method we can access model properties at anytime.

+
    Person = Backbone.Model.extend({
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    
+    var age = person.get("age"); // 67
+    var name = person.get("name"); // "Thomas"
+    var children = person.get("children"); // ['Ryan']
+    
+
+

Setting model defaults

+

Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name ‘defaults’ in your model declaration.

+
    Person = Backbone.Model.extend({
+        defaults: {
+            name: 'Fetus',
+            age: 0,
+            children: []
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    
+    var age = person.get("age"); // 67
+    var name = person.get("name"); // "Thomas"
+    var children = person.get("children"); // ['Ryan']
+    
+
+

Manipulating model attributes

+

Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.

+
    Person = Backbone.Model.extend({
+        defaults: {
+            name: 'Fetus',
+            age: 0,
+            children: []
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+        },
+        adopt: function( newChildsName ){
+            var children_array = this.get("children");
+            children_array.push( newChildsName );
+            this.set({ children: children_array });
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    person.adopt('John Resig');
+    var children = person.get("children"); // ['Ryan', 'John Resig']
+    
+
+

So we can implement methods to get/set and perform other calculations using attributes from our model at any time.

+

Listening for changes to the model

+

Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case every time we adopt a new kid we are going to throw a party.

+
    Person = Backbone.Model.extend({
+        defaults: {
+            name: 'Fetus',
+            age: 0,
+            children: []
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+            this.bind("change:children", function(){
+                alert("More children, single parenting is great!");
+                var children = this.get("children"); // ['Ryan', 'Stewie Griffin']
+            });
+        },
+        adopt: function( newChildsName ){
+            var children_array = this.get("children");
+            children_array.push( newChildsName );
+            this.set({ children: children_array });
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    person.adopt('Stewie Griffin'); // This triggers a change and will alert()
+    
+
+

So we can bind the a change listener to individual attributes or if we like simply ‘this.bind(“change”, function(){});’ to listen for changes to all attributes of the model.

+

Fetching, Saving and Destroying

+

Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.

+

Tips and Tricks

+

Get all the current attributes

+
      
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    var attributes = person.toJSON(); // { name: "Thomas", age: 67, children: ['Ryan']}
+    /* This simply returns a copy of the current attributes. */
+    delete attributes;
+    var attributes = person.attributes;
+    /* The line above gives a direct reference to the attributes and you should be careful when playing with it.   Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */
+
+

Validate data before you set or save it

+
    Person = Backbone.Model.extend({
+        // If you return a string from the validate function,
+        // Backbone will throw an error
+        validate: function( attributes ){
+            if( attributes.age < 0 && attributes.name != "Dr Manhatten" ){
+                return "You can't be negative years old";
+            }
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+            this.bind("error", function(model, error){
+                // We have received an error, log it, alert it or forget it :)
+                alert( error );
+            });
+        }
+    });
+    
+    var person = new Person;
+    person.set({ name: "Mary Poppins", age: -1 }); 
+    // Will trigger an alert outputting the error
+    delete person;
+    
+    var person = new Person;
+    person.set({ name: "Dr Manhatten", age: -1 });
+    // God have mercy on our souls
+    
+
+

Relevant Links

+ +

Author

+ +

Contributors

+ +
+ + + +
+ + + + +
+ +
+ + + + + + diff --git a/pygments/what-is-a-view/index.html b/pygments/what-is-a-view/index.html new file mode 100644 index 00000000..0cd2f728 --- /dev/null +++ b/pygments/what-is-a-view/index.html @@ -0,0 +1,257 @@ + + + + + What is a view? - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+
+
+ home + about + contribute + contact + subscribe +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+
+

What is a view?

+

Backbone views are used reflect what your applications data model looks like. They are also used to listen to events and react accordingly. This tutorial will not be addressing binding models/collections with views. This tutorial will focus on view functionality and how to use it with a javascript templating library.

+

We will be using jQuery 1.5.1 as our DOM manipulator.

+
    Person = Backbone.Model.extend({
+        initialize: function(){
+            alert("Welcome to this world");
+        }   /ch
+    });
+    
+    var person = new Person;
+
+

So initialize() is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don’t have to include it in your model declaration but you will find yourself using it more often than not.

+

Setting attributes

+

Now we want to pass some parameters when we create an instance of our model.

+
    Person = Backbone.Model.extend({
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67});
+    delete person;
+    // or we can set afterwards, these operations are equivelent
+    var person = new Person();
+    person.set({ name: "Thomas", age: 67});
+    
+
+

So passing a javascript object to our constructor is the same as calling model.set(). Now that these models have attributes set we need to be able to retrieve them.

+

Getting attributes

+

Using the model.get() method we can access model properties at anytime.

+
    Person = Backbone.Model.extend({
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    
+    var age = person.get("age"); // 67
+    var name = person.get("name"); // "Thomas"
+    var children = person.get("children"); // ['Ryan']
+    
+
+

Setting model defaults

+

Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name ‘defaults’ in your model declaration.

+
    Person = Backbone.Model.extend({
+        defaults: {
+            name: 'Fetus',
+            age: 0,
+            children: []
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    
+    var age = person.get("age"); // 67
+    var name = person.get("name"); // "Thomas"
+    var children = person.get("children"); // ['Ryan']
+    
+
+

Manipulating model attributes

+

Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.

+
    Person = Backbone.Model.extend({
+        defaults: {
+            name: 'Fetus',
+            age: 0,
+            children: []
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+        },
+        adopt: function( newChildsName ){
+            var children_array = this.get("children");
+            children_array.push( newChildsName );
+            this.set({ children: children_array });
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    person.adopt('John Resig');
+    var children = person.get("children"); // ['Ryan', 'John Resig']
+    
+
+

So we can implement methods to get/set and perform other calculations using attributes from our model at any time.

+

Listening for changes to the model

+

Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case every time we adopt a new kid we are going to throw a party.

+
    Person = Backbone.Model.extend({
+        defaults: {
+            name: 'Fetus',
+            age: 0,
+            children: []
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+            this.bind("change:children", function(){
+                alert("More children, single parenting is great!");
+                var children = this.get("children"); // ['Ryan', 'Stewie Griffin']
+            });
+        },
+        adopt: function( newChildsName ){
+            var children_array = this.get("children");
+            children_array.push( newChildsName );
+            this.set({ children: children_array });
+        }
+    });
+    
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    person.adopt('Stewie Griffin'); // This triggers a change and will alert()
+    
+
+

So we can bind the a change listener to individual attributes or if we like simply ‘this.bind(“change”, function(){});’ to listen for changes to all attributes of the model.

+

Fetching, Saving and Destroying

+

Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.

+

Tips and Tricks

+

Get all the current attributes

+
      
+    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
+    var attributes = person.toJSON; // { name: "Thomas", age: 67, children: ['Ryan']}
+    /* This simply returns a copy of the current attributes. */
+    delete attributes;
+    var attributes = person.attributes;
+    /* The line above gives a direct reference to the attributes and you should be careful when playing with it.   Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */
+
+

Validate data before you set or save it

+
    Person = Backbone.Model.extend({
+        // If you return a string from the validate function,
+        // Backbone will throw an error
+        validate: function( attributes ){
+            if( attributes.age < 0 && attributes.name != "Dr Manhatten" ){
+                return "You can't be negative years old";
+            }
+        },
+        initialize: function(){
+            alert("Welcome to this world");
+            this.bind("error", function(model, error){
+                // We have received an error, log it, alert it or forget it :)
+                alert( error );
+            });
+        }
+    });
+    
+    var person = new Person;
+    person.set({ name: "Mary Poppins", age: -1 }); 
+    // Will trigger an alert outputting the error
+    delete person;
+    
+    var person = new Person;
+    person.set({ name: "Dr Manhatten", age: -1 });
+    // God have mercy on our souls
+    
+
+

Relevant Links

+ +

Author

+ +

Contributors

+
    +
  • None
    • +
+
+ + + +
+ + + + +
+ +
+ + + + + + diff --git a/pygments/why-would-you-use-backbone/index.html b/pygments/why-would-you-use-backbone/index.html new file mode 100644 index 00000000..73a5b4a5 --- /dev/null +++ b/pygments/why-would-you-use-backbone/index.html @@ -0,0 +1,101 @@ + + + + + Why would you use backbone.js? - Backbone.js Tutorials + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Fork on GitHub + +
+
+
+ home + about + contribute + contact + subscribe +
+ + + + +
+
+

Backbone Tutorials

+

This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.

+
+
+

Why do you need backbone.js?

+

Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools. The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete DOM elements.

+

I shouldn’t need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of implement your own way of structuring your application but you miss out on the benefits of the open source community.

+

So how does backbone.js help?

+

Backbone is an incredibly small library for the amount of functionality and structure it gives you. One can not easily summarize the benefits you will reap from using it. If you read through some of the beginner tutorials the benefits will soon become self evident and due to backbone.js light nature you can incrementally include it in any current or future projects.

+

Relevant Links

+ +
+ + + +
+ + + + +
+ +
+ + + + + +