Skip to content

Commit

Permalink
Fix minor spelling mistakes
Browse files Browse the repository at this point in the history
* Update jQuery version
* Change `DESTROY` to `DELETE`
* Fix link(s)
* Underscore.js is now AMD enabled by default
  • Loading branch information
christianvuerings committed Oct 23, 2012
1 parent 71a96a0 commit fee6c53
Show file tree
Hide file tree
Showing 10 changed files with 81 additions and 81 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@ Thomas Davis - [@neutralthoughts](http://twitter.com/neutralthoughts) - Twitter
**Contact:**

* [@neutralthoughts](http://twitter.com/neutralthoughts) on twitter
* Github - https://github.com/thomasdavis
* GitHub - https://github.com/thomasdavis
* thomasalwyndavis@gmail.com

**Projects:**

* Javascript Library CDN - http://cdnjs.com
* JavaScript Library CDN - http://cdnjs.com
* Backbone.js Tutorials - http://backbonetutorials.com
* Proposal Generation Start up - http://protosal.com
* Technical Blog - http://thomasdavis.github.com
Expand Down
8 changes: 4 additions & 4 deletions _posts/2011-01-27-what-is-a-router.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ posturl: http://backbonetutorials.com/what-is-a-router

# 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?](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.
Backbone routers are used for routing your applications URL's when using hash tags(#). In the traditional MVC sense they don't necessarily 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)
Also note that routes interpret 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 %}

Expand All @@ -28,7 +28,7 @@ Also note that routes intepret anything after "#" tag in the url. All links in
alert(actions);
})

// Start Backbone history a neccesary step for bookmarkable URL's
// Start Backbone history a necessary step for bookmarkable URL's
Backbone.history.start();

</script>
Expand Down Expand Up @@ -63,7 +63,7 @@ Most conventional frameworks allow you to define routes that contain a mix of st
app_router.on('route:defaultRoute', function (actions) {
alert( actions );
});
// Start Backbone history a neccesary step for bookmarkable URL's
// Start Backbone history a necessary step for bookmarkable URL's
Backbone.history.start();

</script>
Expand Down
2 changes: 1 addition & 1 deletion _posts/2011-01-28-what-is-a-view.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ posturl: http://backbonetutorials.com/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](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.
We will be using [jQuery 1.8.2](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/tBS4X/1/) can be found on jsFiddle.

Expand Down
10 changes: 5 additions & 5 deletions _posts/2011-01-29-what-is-a-model.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ Now we want to pass some parameters when we create an instance of our model.

{% endhighlight %}

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.
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

Expand Down Expand Up @@ -138,7 +138,7 @@ Now onto one of the more useful parts of using a library such as backbone. All
person.set({name: 'Stewie Griffin'}); // This triggers a change and will alert()
{% endhighlight %}

So we can bind the a change listener to individual attributes or if we like simply '_this.on("change", function(model){});_' to listen for changes to all attributes of the model.
So we can bind the change listener to individual attributes or if we like simply '_this.on("change", function(model){});_' to listen for changes to all attributes of the model.

## Interacting with the server

Expand All @@ -148,7 +148,7 @@ The `id` attribute of a model identifies how to find it on the database usually

For the purpose of this tutorial imagine that we have a mysql table called `Users` with the columns `id`, `name`, `email`.

The server has implemented a RESTful url `/user` which allows us to interact with it.
The server has implemented a RESTful URL `/user` which allows us to interact with it.

Our model definition shall thus look like;

Expand Down Expand Up @@ -243,7 +243,7 @@ We will use the `save` api call which is intelligent and will send a PUT request

{% endhighlight %}

### Deleteing a model
### Deleting a model

When a model has an `id` we know that it exist on the server, so if we wish to remove it from the server we can call `destroy`. `destroy` will fire off a DELETE /user/id (conforming to RESTful conventions).

Expand All @@ -257,7 +257,7 @@ When a model has an `id` we know that it exist on the server, so if we wish to r
});

// Because there is `id` present, Backbone.js will fire
// DESTROY /user/1
// DELETE /user/1
user.destroy({
success: function () {
alert('Destroyed');
Expand Down
48 changes: 24 additions & 24 deletions _posts/2011-10-10-organizing-backbone-using-modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@ posturl: http://backbonetutorials.com/organizing-backbone-using-modules

# Organizing your application using Modules (require.js)

Unfortunately Backbone.js does not tell you how to organize your code, leaving many developers in the dark regarding how to load scripts and lay out their development enviroments.
Unfortunately Backbone.js does not tell you how to organize your code, leaving many developers in the dark regarding how to load scripts and lay out their development environments.

This was quite a different decision to other Javascript MVC frameworks who were more in favor of setting a development philosophy.
This was quite a different decision to other JavaScript MVC frameworks who were more in favor of setting a development philosophy.

Hopefully this tutorial will allow you to build a much more robust project with great separation of concerns between design and code.

This tutorial will get you started on combining Backbone.js with [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD) (Asynchronous Module Definitions).

## What is AMD?

[Asynchronous Module Definitions](https://github.com/amdjs/amdjs-api/wiki/AMD) designed to load modular code asynchronously in the browser and server. It is actually a fork of the Common.js specification. Many script loaders have built their implementations around AMD, seeing it as the future of modular Javascript development.
[Asynchronous Module Definitions](https://github.com/amdjs/amdjs-api/wiki/AMD) designed to load modular code asynchronously in the browser and server. It is actually a fork of the Common.js specification. Many script loaders have built their implementations around AMD, seeing it as the future of modular JavaScript development.

This tutorial will use [Require.js](http://requirejs.org) to implement a modular and organized Backbone.js.

Expand All @@ -32,7 +32,7 @@ Quick Overview

## Why Require.js?

p. Require.js has a great community and it is growing rapidly. [James Burke](http://tagneto.blogspot.com/) the author is married to Require.js and responds to user feedback always. A leading expert in script loading, he is also a contributer to the AMD specification.
p. Require.js has a great community and it is growing rapidly. [James Burke](http://tagneto.blogspot.com/) the author is married to Require.js and always responds to user feedback. He is a leading expert in script loading and a contributer to the AMD specification.

<a href="https://twitter.com/jrburke" class="twitter-follow-button">Follow @jrburke</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
Expand All @@ -48,13 +48,13 @@ To easily understand this tutorial you should jump straight into the example cod

The tutorial is only loosely coupled with the example and you will find the example to be more comprehensive.

If you would like to see how a particuliar use case would be implemented please visit the Github page and create an issue.(Example Request: How to do nested views).
If you would like to see how a particular use case would be implemented please visit the GitHub page and create an issue.(Example Request: How to do nested views).

The example isn't super fleshed out but should give you a vague idea.

## Example File Structure

There are many different ways to lay out your files and I believe it is actually dependent on the size and type of the project. In the example below views and templates are mirroed in file structure. Collections and Models are categorized into folders kind of like an ORM.
There are many different ways to lay out your files and I believe it is actually dependent on the size and type of the project. In the example below views and templates are mirrored in file structure. Collections and Models are categorized into folders kind of like an ORM.

{% highlight javascript %}
/* File Structure
Expand Down Expand Up @@ -133,21 +133,21 @@ You should most always end up with quite a light weight index file. You can se

Our bootstrap file will be responsible for configuring Require.js and loading initially important dependencies.

In the below example we configure Require.js to create shortcut alias to commonly used scripts such as jQuery, Underscore and Backbone.
In the example below we configure Require.js to create a shortcut alias to commonly used scripts such as jQuery, Underscore and Backbone.

Underscore.js and Backbone.js aren't AMD enabled so I have download the community managed repository versions which are. You can find them [here](https://github.com/amdjs)
Unfortunately Backbone.js isn't AMD enabled so I downloaded the community managed repository and patched it on [amdjs](https://github.com/amdjs).

Hopefully if the AMD specification takes off these libraries will add code to allow themselves to be loaded asynchronously. Due to this inconvience the bootstrap is not as intuitive as it could be.
Hopefully if the AMD specification takes off these libraries will add code to allow themselves to be loaded asynchronously. Due to this inconvenience the bootstrap is not as intuitive as it could be.

We also request a module called "app", this will contain the entireity of our application logic.
We also request a module called "app", this will contain the entirety of our application logic.

_Note: Modules are loaded relativly to the boot strap and always append with ".js". So the module "app" will load "app.js" which is in the same directory as the bootstrap._
_Note: Modules are loaded relatively to the boot strap and always append with ".js". So the module "app" will load "app.js" which is in the same directory as the bootstrap._

{% highlight javascript %}
// Filename: main.js

// Require.js allows us to configure shortcut alias
// There usage will become more apparent futher along in the tutorial.
// There usage will become more apparent further along in the tutorial.
require.config({
paths: {
jquery: 'libs/jquery/jquery',
Expand All @@ -172,15 +172,15 @@ require([

Any modules we develop for our application using AMD/Require.js will be asynchronously loaded.

We have a heavy dependency on jQuery, Underscore and Backbone, unfortunatly this libraries are loaded synchronously and also depend on each other existing in the global namespace.
We have a heavy dependency on jQuery, Underscore and Backbone, unfortunately this libraries are loaded synchronously and also depend on each other existing in the global namespace.



## A boiler plate module

So before we start developing our application, let's quickly look over boiler plate code that will be reused quite often.

For convience sake I generally keep a "boilerplate.js" in my application root so I can copy it when I need to.
For convenience sake I generally keep a "boilerplate.js" in my application root so I can copy it when I need to.

{%highlight javascript %}
//Filename: boilerplate.js
Expand All @@ -192,17 +192,17 @@ define([
'backbone' // lib/backbone/backbone
], function($, _, Backbone){
// Above we have passed in jQuery, Underscore and Backbone
// They will not be accesible in the global scope
// They will not be accessible in the global scope
return {};
// What we return here will be used by other modules
});
{% endhighlight %}

The first argument of the define function is our dependency array, we can pass in any modules we like in the future.
The first argument of the define function is our dependency array, in the future we can pass in any modules we like.

## App.js Building our applications main module

Our applications main module should always remain quite light weight. This tutorial covers only setting up a Backbone Router and initializing it in our main module.
Our applications main module should always remain light weight. This tutorial only covers setting up a Backbone Router and initializing it in our main module.

The router will then load the correct dependencies depending on the current URL.

Expand Down Expand Up @@ -273,7 +273,7 @@ define([

## Modularizing a Backbone View

Backbone views most usually always interact with the DOM, using our new modular system we can load in Javascript templates using Require.js text! plugin.
Backbone views usually interact with the DOM. Using our new modular system we can load in JavaScript templates using the Require.js text! plug-in.

{% highlight javascript %}
// Filename: views/project/list
Expand All @@ -300,13 +300,13 @@ define([
});
{% endhighlight %}

Javascript templating allows us to seperate the design from the application logic placing all our html in the templates folder.
JavaScript templating allows us to separate the design from the application logic by placing all our HTML in the templates folder.

## Modularizing a Collection, Model and View

Now we put it altogether by chaining up a Model, Collection and View which is a typical scenario when building a Backbone.js application.

First off we will define our model
First we will define our model

{% highlight javascript %}
// Filename: models/project
Expand All @@ -324,7 +324,7 @@ define([
});
{% endhighlight %}

Now we have a model, our collection module can depend on it. We will set the "model" attribute of our collection to the loaded module. Backbone.js offers great benefits when doing this.
Now that we have a model, our collection module can depend on it. We will set the "model" attribute of our collection to the loaded module. Backbone.js offers great benefits when doing this.

> Collection.model: Override this property to specify the model class that the collection contains. If defined, you can pass raw attributes objects (and arrays) to add, create, and reset, and the attributes will be converted into a model of the proper type.
Expand All @@ -344,7 +344,7 @@ define([
});
{% endhighlight %}

Now we can simply depend on our collection in our view and pass it to our Javascript template.
Now we can simply depend on our collection in our view and pass it to our JavaScript template.

{% highlight javascript %}
// Filename: views/projects/list
Expand Down Expand Up @@ -373,9 +373,9 @@ define([

## Conclusion

Looking forward to feedback so I can turn this post and example into quality references on building modular Javascript applications.
Looking forward to feedback so I can turn this post and example into quality references on building modular JavaScript applications.

Get in touch with me on twitter, comments or github!
Get in touch with me on twitter, comments or GitHub!

### Relevant Links

Expand Down
Loading

0 comments on commit fee6c53

Please sign in to comment.