You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
11
11
12
12
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.
13
13
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)
15
15
16
16
{% highlight html %}
17
17
@@ -28,7 +28,7 @@ Also note that routes intepret anything after "#" tag in the url. All links in
28
28
alert(actions);
29
29
})
30
30
31
-
// Start Backbone history a neccesary step for bookmarkable URL's
31
+
// Start Backbone history a necessary step for bookmarkable URL's
32
32
Backbone.history.start();
33
33
34
34
</script>
@@ -63,7 +63,7 @@ Most conventional frameworks allow you to define routes that contain a mix of st
63
63
app_router.on('route:defaultRoute', function (actions) {
64
64
alert( actions );
65
65
});
66
-
// Start Backbone history a neccesary step for bookmarkable URL's
66
+
// Start Backbone history a necessary step for bookmarkable URL's
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).
11
11
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.
13
13
14
14
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.
Copy file name to clipboardexpand all lines: _posts/2011-01-29-what-is-a-model.md
+5-5
Original file line number
Diff line number
Diff line change
@@ -43,7 +43,7 @@ Now we want to pass some parameters when we create an instance of our model.
43
43
44
44
{% endhighlight %}
45
45
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.
47
47
48
48
## Getting attributes
49
49
@@ -138,7 +138,7 @@ Now onto one of the more useful parts of using a library such as backbone. All
138
138
person.set({name: 'Stewie Griffin'}); // This triggers a change and will alert()
139
139
{% endhighlight %}
140
140
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.
142
142
143
143
## Interacting with the server
144
144
@@ -148,7 +148,7 @@ The `id` attribute of a model identifies how to find it on the database usually
148
148
149
149
For the purpose of this tutorial imagine that we have a mysql table called `Users` with the columns `id`, `name`, `email`.
150
150
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.
152
152
153
153
Our model definition shall thus look like;
154
154
@@ -243,7 +243,7 @@ We will use the `save` api call which is intelligent and will send a PUT request
243
243
244
244
{% endhighlight %}
245
245
246
-
### Deleteing a model
246
+
### Deleting a model
247
247
248
248
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).
249
249
@@ -257,7 +257,7 @@ When a model has an `id` we know that it exist on the server, so if we wish to r
257
257
});
258
258
259
259
// Because there is `id` present, Backbone.js will fire
# Organizing your application using Modules (require.js)
9
9
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.
11
11
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.
13
13
14
14
Hopefully this tutorial will allow you to build a much more robust project with great separation of concerns between design and code.
15
15
16
16
This tutorial will get you started on combining Backbone.js with [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD) (Asynchronous Module Definitions).
17
17
18
18
## What is AMD?
19
19
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.
21
21
22
22
This tutorial will use [Require.js](http://requirejs.org) to implement a modular and organized Backbone.js.
23
23
@@ -32,7 +32,7 @@ Quick Overview
32
32
33
33
## Why Require.js?
34
34
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.
@@ -48,13 +48,13 @@ To easily understand this tutorial you should jump straight into the example cod
48
48
49
49
The tutorial is only loosely coupled with the example and you will find the example to be more comprehensive.
50
50
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).
52
52
53
53
The example isn't super fleshed out but should give you a vague idea.
54
54
55
55
## Example File Structure
56
56
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.
58
58
59
59
{% highlight javascript %}
60
60
/* File Structure
@@ -133,21 +133,21 @@ You should most always end up with quite a light weight index file. You can se
133
133
134
134
Our bootstrap file will be responsible for configuring Require.js and loading initially important dependencies.
135
135
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.
137
137
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).
139
139
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.
141
141
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.
143
143
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._
145
145
146
146
{% highlight javascript %}
147
147
// Filename: main.js
148
148
149
149
// 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.
151
151
require.config({
152
152
paths: {
153
153
jquery: 'libs/jquery/jquery',
@@ -172,15 +172,15 @@ require([
172
172
173
173
Any modules we develop for our application using AMD/Require.js will be asynchronously loaded.
174
174
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.
176
176
177
177
178
178
179
179
## A boiler plate module
180
180
181
181
So before we start developing our application, let's quickly look over boiler plate code that will be reused quite often.
182
182
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.
184
184
185
185
{%highlight javascript %}
186
186
//Filename: boilerplate.js
@@ -192,17 +192,17 @@ define([
192
192
'backbone' // lib/backbone/backbone
193
193
], function($, _, Backbone){
194
194
// 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
196
196
return {};
197
197
// What we return here will be used by other modules
198
198
});
199
199
{% endhighlight %}
200
200
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.
202
202
203
203
## App.js Building our applications main module
204
204
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.
206
206
207
207
The router will then load the correct dependencies depending on the current URL.
208
208
@@ -273,7 +273,7 @@ define([
273
273
274
274
## Modularizing a Backbone View
275
275
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.
277
277
278
278
{% highlight javascript %}
279
279
// Filename: views/project/list
@@ -300,13 +300,13 @@ define([
300
300
});
301
301
{% endhighlight %}
302
302
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.
304
304
305
305
## Modularizing a Collection, Model and View
306
306
307
307
Now we put it altogether by chaining up a Model, Collection and View which is a typical scenario when building a Backbone.js application.
308
308
309
-
First off we will define our model
309
+
First we will define our model
310
310
311
311
{% highlight javascript %}
312
312
// Filename: models/project
@@ -324,7 +324,7 @@ define([
324
324
});
325
325
{% endhighlight %}
326
326
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.
328
328
329
329
> 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.
330
330
@@ -344,7 +344,7 @@ define([
344
344
});
345
345
{% endhighlight %}
346
346
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.
348
348
349
349
{% highlight javascript %}
350
350
// Filename: views/projects/list
@@ -373,9 +373,9 @@ define([
373
373
374
374
## Conclusion
375
375
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.
377
377
378
-
Get in touch with me on twitter, comments or github!
378
+
Get in touch with me on twitter, comments or GitHub!
0 commit comments