Skip to content

Commit fee6c53

Browse files
Fix minor spelling mistakes
* Update jQuery version * Change `DESTROY` to `DELETE` * Fix link(s) * Underscore.js is now AMD enabled by default
1 parent 71a96a0 commit fee6c53

10 files changed

+81
-81
lines changed

README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ Thomas Davis - [@neutralthoughts](http://twitter.com/neutralthoughts) - Twitter
2020
**Contact:**
2121

2222
* [@neutralthoughts](http://twitter.com/neutralthoughts) on twitter
23-
* Github - https://github.com/thomasdavis
23+
* GitHub - https://github.com/thomasdavis
2424
2525

2626
**Projects:**
2727

28-
* Javascript Library CDN - http://cdnjs.com
28+
* JavaScript Library CDN - http://cdnjs.com
2929
* Backbone.js Tutorials - http://backbonetutorials.com
3030
* Proposal Generation Start up - http://protosal.com
3131
* Technical Blog - http://thomasdavis.github.com

_posts/2011-01-27-what-is-a-router.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ posturl: http://backbonetutorials.com/what-is-a-router
77

88
# What is a router?
99

10-
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.
10+
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.
1111

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

14-
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)
14+
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)
1515

1616
{% highlight html %}
1717

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

31-
// Start Backbone history a neccesary step for bookmarkable URL's
31+
// Start Backbone history a necessary step for bookmarkable URL's
3232
Backbone.history.start();
3333

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

6969
</script>

_posts/2011-01-28-what-is-a-view.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ posturl: http://backbonetutorials.com/what-is-a-view
99

1010
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).
1111

12-
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.
12+
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.
1313

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

_posts/2011-01-29-what-is-a-model.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ Now we want to pass some parameters when we create an instance of our model.
4343

4444
{% endhighlight %}
4545

46-
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.
46+
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.
4747

4848
## Getting attributes
4949

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

141-
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.
141+
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.
142142

143143
## Interacting with the server
144144

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

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

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

153153
Our model definition shall thus look like;
154154

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

244244
{% endhighlight %}
245245

246-
### Deleteing a model
246+
### Deleting a model
247247

248248
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).
249249

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

259259
// Because there is `id` present, Backbone.js will fire
260-
// DESTROY /user/1
260+
// DELETE /user/1
261261
user.destroy({
262262
success: function () {
263263
alert('Destroyed');

_posts/2011-10-10-organizing-backbone-using-modules.md

+24-24
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@ posturl: http://backbonetutorials.com/organizing-backbone-using-modules
77

88
# Organizing your application using Modules (require.js)
99

10-
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.
10+
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.
1111

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

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

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

1818
## What is AMD?
1919

20-
[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.
20+
[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.
2121

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

@@ -32,7 +32,7 @@ Quick Overview
3232

3333
## Why Require.js?
3434

35-
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.
35+
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.
3636

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

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

51-
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).
51+
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).
5252

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

5555
## Example File Structure
5656

57-
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.
57+
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.
5858

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

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

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

138-
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)
138+
Unfortunately Backbone.js isn't AMD enabled so I downloaded the community managed repository and patched it on [amdjs](https://github.com/amdjs).
139139

140-
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.
140+
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.
141141

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

144-
_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._
144+
_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._
145145

146146
{% highlight javascript %}
147147
// Filename: main.js
148148

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

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

175-
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.
175+
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.
176176

177177

178178

179179
## A boiler plate module
180180

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

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

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

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

203203
## App.js Building our applications main module
204204

205-
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.
205+
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.
206206

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

@@ -273,7 +273,7 @@ define([
273273

274274
## Modularizing a Backbone View
275275

276-
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.
276+
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.
277277

278278
{% highlight javascript %}
279279
// Filename: views/project/list
@@ -300,13 +300,13 @@ define([
300300
});
301301
{% endhighlight %}
302302

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

305305
## Modularizing a Collection, Model and View
306306

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

309-
First off we will define our model
309+
First we will define our model
310310

311311
{% highlight javascript %}
312312
// Filename: models/project
@@ -324,7 +324,7 @@ define([
324324
});
325325
{% endhighlight %}
326326

327-
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.
327+
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.
328328

329329
> 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.
330330
@@ -344,7 +344,7 @@ define([
344344
});
345345
{% endhighlight %}
346346

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

349349
{% highlight javascript %}
350350
// Filename: views/projects/list
@@ -373,9 +373,9 @@ define([
373373

374374
## Conclusion
375375

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

378-
Get in touch with me on twitter, comments or github!
378+
Get in touch with me on twitter, comments or GitHub!
379379

380380
### Relevant Links
381381

0 commit comments

Comments
 (0)