Skip to content

Commit c7bb516

Browse files
thomasdavisthomasdavis
committedOct 13, 2011
If it don't matter to you
1 parent e3963e7 commit c7bb516

File tree

25 files changed

+861
-82
lines changed

25 files changed

+861
-82
lines changed
 

‎_posts/2011-10-10-organizing-backbone-using-modules.textile

+42-25
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,15 @@ This tutorial will use "Require.js":http://requirejs.org to implement a modular
2626
Quick Overview
2727
* Modular
2828
* Scalable
29-
* Compiles well(see "r.js":http)
30-
* Market Adoption( Dojo 1.6 converted fully to AMD )
29+
* Compiles well(see "r.js":http://requirejs.org/docs/optimization.html)
30+
* Market Adoption( "Dojo 1.6 converted fully to AMD":http://dojotoolkit.org/reference-guide/releasenotes/1.6.html )
3131

3232
h3. Why Require.js?
3333

34-
p. Require.js has a boastful community and is growing rapidly. James Burke the author updates Require.js almost daily and responds to user feedback always. He is also a contributer to the AMD specification.
34+
p. Require.js has a boastful community and is growing rapidly. "James Burke":http://tagneto.blogspot.com/ the author updates Require.js almost daily and responds to user feedback always. A leading expert in script loading, he is also a contributer to the AMD specification.
3535

36+
<a href="https://twitter.com/jrburke" class="twitter-follow-button">Follow @jrburke</a>
37+
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
3638

3739
h3. Getting started
3840

@@ -42,13 +44,13 @@ h3. "Example Codebase":http://backbonetutorials.com/examples/modular-backbone
4244

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

45-
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)
47+
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).
4648

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

4951
h3. Example File Structure
5052

51-
p. There are many different ways to lay out your files and I believe it is actually dependent on the size of the project. In the example below views and template s are mirroed in file structure. Collections and Models aren't categorized into folders.
53+
p. 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 aren't categorized into folders kind of like an ORM.
5254

5355
{% highlight javascript %}
5456
/* File Structure
@@ -95,6 +97,7 @@ p. There are many different ways to lay out your files and I believe it is actua
9597

9698
*/
9799
{% endhighlight %}
100+
98101
p. To continue you must really understand what we are aiming towards as described in the introduction.
99102

100103
h3. Bootstrapping your application
@@ -291,7 +294,7 @@ define([
291294
showUsers: function(){
292295
userListView.render();
293296
},
294-
default: function(actions){
297+
defaultAction: function(actions){
295298
// We have no matching route, lets just log what the URL was
296299
console.log('No route:', actions);
297300
}
@@ -352,60 +355,74 @@ define([
352355
'Backbone'
353356
], function(_, Backbone){
354357
var projectModel = Backbone.Model.extend({
355-
initialize: function(){
356-
358+
defaults: {
359+
name: "Harry Potter"
357360
}
358361
});
359-
return new projectModel;
362+
// You usually don't return a model instantiated
363+
return projectModel;
360364
});
361365
{% endhighlight %}
362366

363-
p. Now we have a model, our collection module can depend on it
367+
p. 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.
368+
369+
"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."
364370

365371
{% highlight javascript %}
366-
// Filename: collections/project
372+
// Filename: collections/projects
367373
define([
368374
'Underscore',
369375
'Backbone',
370376
// Pull in the Model module from above
371377
'models/project'
372-
], function(_, Backbone, projectModels){
378+
], function(_, Backbone, projectModel){
373379
var projectCollection = Backbone.Collection.extend({
374-
initialize: function(){
375-
376-
}
380+
model: projectModel
377381
});
382+
// You don't usually return a collection instantiated
378383
return new projectCollection;
379384
});
380385
{% endhighlight %}
381386

382-
Now we can simply depend on our collection in our view.
387+
Now we can simply depend on our collection in our view and pass it to our Javascript template.
383388

384389
{% highlight javascript %}
385-
// Filename: views/project/list
390+
// Filename: views/projects/list
386391
define([
387392
'jQuery',
388393
'Underscore',
389394
'Backbone',
390395
// Pull in the Collection module from above
391-
'collections/project',
392-
'text!templates/project/list
393-
], function(_, Backbone, projectModels){
394-
var projectCollection = Backbone.Collection.extend({
396+
'collections/projects',
397+
'text!templates/projects/list
398+
], function(_, Backbone, projectsCollection, projectsListTemplate){
399+
var projectListView = Backbone.View.extend({
400+
el: $("#container"),
395401
initialize: function(){
396-
402+
this.collection = new projectsCollection;
403+
this.collection.add({ name: "Ginger Kid"});
404+
// Compile the template using Underscores micro-templating
405+
var compiledTemplate = _.template( projectsListTemplate, { projects: this.collection.models } );
406+
this.el.html(compiledTemplate);
397407
}
398408
});
399-
return new projectCollection;
409+
// Returning instantiated views can be quite useful for having "state"
410+
return new projectListView;
400411
});
401412
{% endhighlight %}
402413

414+
h3. Conclusion
403415

404-
h3. Relevant Links
416+
p. Looking forward to feedback so I can turn this post and example into quality references on building modular Javascript applications.
405417

418+
Get in touch with me on twitter, comments or github!
406419

420+
<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
421+
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
422+
423+
h3. Relevant Links
407424

408-
* "Backbone.js official website":http://documentcloud.github.com/backbone/
425+
"Organizing Your Backbone.js Application With Modules":http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules
409426

410427

411428

‎_site/atom.xml

+64-29
Large diffs are not rendered by default.

‎_site/examples/modular-backbone/css/style.css

+310
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,310 @@
1+
/*
2+
* HTML5 Boilerplate
3+
*
4+
* What follows is the result of much research on cross-browser styling.
5+
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
6+
* Kroc Camen, and the H5BP dev community and team.
7+
*/
8+
9+
10+
/* =============================================================================
11+
HTML5 element display
12+
========================================================================== */
13+
14+
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
15+
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }
16+
17+
18+
/* =============================================================================
19+
Base
20+
========================================================================== */
21+
22+
/*
23+
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
24+
* http://clagnut.com/blog/348/#c790
25+
* 2. Force vertical scrollbar in non-IE
26+
* 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
27+
* www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
28+
* 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom
29+
* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
30+
*/
31+
32+
html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
33+
34+
body { margin: 0; font-size: 13px; line-height: 1.231; }
35+
36+
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
37+
38+
/*
39+
* These selection declarations have to be separate
40+
* No text-shadow: twitter.com/miketaylr/status/12228805301
41+
* Also: hot pink!
42+
*/
43+
44+
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
45+
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
46+
47+
48+
/* =============================================================================
49+
Links
50+
========================================================================== */
51+
52+
a { color: #00e; }
53+
a:visited { color: #551a8b; }
54+
a:focus { outline: thin dotted; }
55+
56+
/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
57+
a:hover, a:active { outline: 0; }
58+
59+
60+
/* =============================================================================
61+
Typography
62+
========================================================================== */
63+
64+
abbr[title] { border-bottom: 1px dotted; }
65+
66+
b, strong { font-weight: bold; }
67+
68+
blockquote { margin: 1em 40px; }
69+
70+
dfn { font-style: italic; }
71+
72+
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
73+
74+
ins { background: #ff9; color: #000; text-decoration: none; }
75+
76+
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
77+
78+
/* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
79+
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
80+
81+
/* Improve readability of pre-formatted text in all browsers */
82+
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
83+
84+
q { quotes: none; }
85+
q:before, q:after { content: ""; content: none; }
86+
87+
small { font-size: 85%; }
88+
89+
/* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */
90+
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
91+
sup { top: -0.5em; }
92+
sub { bottom: -0.25em; }
93+
94+
95+
/* =============================================================================
96+
Lists
97+
========================================================================== */
98+
99+
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
100+
dd { margin: 0 0 0 40px; }
101+
nav ul, nav ol { list-style: none; margin: 0; padding: 0; }
102+
103+
104+
/* =============================================================================
105+
Embedded content
106+
========================================================================== */
107+
108+
/*
109+
* Improve image quality when scaled in IE7
110+
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
111+
*/
112+
113+
img { border: 0; -ms-interpolation-mode: bicubic; }
114+
115+
/*
116+
* Correct overflow displayed oddly in IE9
117+
*/
118+
119+
svg:not(:root) {
120+
overflow: hidden;
121+
}
122+
123+
124+
/* =============================================================================
125+
Figures
126+
========================================================================== */
127+
128+
figure { margin: 0; }
129+
130+
131+
/* =============================================================================
132+
Forms
133+
========================================================================== */
134+
135+
form { margin: 0; }
136+
fieldset { border: 0; margin: 0; padding: 0; }
137+
138+
/*
139+
* 1. Correct color not inheriting in IE6/7/8/9
140+
* 2. Correct alignment displayed oddly in IE6/7
141+
*/
142+
143+
legend { border: 0; *margin-left: -7px; padding: 0; }
144+
145+
/* Indicate that 'label' will shift focus to the associated form element */
146+
label { cursor: pointer; }
147+
148+
/*
149+
* 1. Correct font-size not inheriting in all browsers
150+
* 2. Remove margins in FF3/4 S5 Chrome
151+
* 3. Define consistent vertical alignment display in all browsers
152+
*/
153+
154+
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
155+
156+
/*
157+
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
158+
* 2. Correct inner spacing displayed oddly in IE6/7
159+
*/
160+
161+
button, input { line-height: normal; *overflow: visible; }
162+
163+
/*
164+
* 1. Display hand cursor for clickable form elements
165+
* 2. Allow styling of clickable form elements in iOS
166+
*/
167+
168+
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
169+
170+
/*
171+
* Consistent box sizing and appearance
172+
*/
173+
174+
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
175+
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
176+
177+
/*
178+
* Remove inner padding and border in FF3/4
179+
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
180+
*/
181+
182+
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
183+
184+
/* Remove default vertical scrollbar in IE6/7/8/9 */
185+
textarea { overflow: auto; vertical-align: top; }
186+
187+
/* Colors for form validity */
188+
input:valid, textarea:valid { }
189+
input:invalid, textarea:invalid { background-color: #f0dddd; }
190+
191+
192+
/* =============================================================================
193+
Tables
194+
========================================================================== */
195+
196+
table { border-collapse: collapse; border-spacing: 0; }
197+
198+
199+
/* =============================================================================
200+
Primary styles
201+
Author:
202+
========================================================================== */
203+
body {
204+
background: #ebebeb;
205+
}
206+
207+
#container {
208+
width: 960px;
209+
margin: auto;
210+
min-height: 500px;
211+
background: #fff;
212+
}
213+
#menu {
214+
background: #444;
215+
height: 30px; color: #fff; text-align: right;
216+
}
217+
#menu ul {
218+
list-style: none;
219+
margin: 0; padding: 0;
220+
}
221+
#menu ul li {
222+
float: left;
223+
margin-left: 10px;
224+
}
225+
#menu ul li a {
226+
color: #fff;
227+
line-height: 30px;
228+
text-decoration: none;
229+
}
230+
#menu ul li a:hover {
231+
color: #ccc;
232+
}
233+
#header {
234+
235+
}
236+
#page {
237+
border-top: 1px solid #ebebeb;
238+
border-bottom: 1px solid #ebebeb;
239+
min-height: 400px;
240+
}
241+
242+
#footer {
243+
text-align: center;
244+
}
245+
/* =============================================================================
246+
Non-semantic helper classes
247+
Please define your styles before this section.
248+
========================================================================== */
249+
250+
/* For image replacement */
251+
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
252+
.ir br { display: none; }
253+
254+
/* Hide for both screenreaders and browsers:
255+
css-discuss.incutio.com/wiki/Screenreader_Visibility */
256+
.hidden { display: none; visibility: hidden; }
257+
258+
/* Hide only visually, but have it available for screenreaders: by Jon Neal.
259+
www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
260+
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
261+
262+
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
263+
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
264+
265+
/* Hide visually and from screenreaders, but maintain layout */
266+
.invisible { visibility: hidden; }
267+
268+
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
269+
.clearfix:before, .clearfix:after { content: ""; display: table; }
270+
.clearfix:after { clear: both; }
271+
.clearfix { zoom: 1; }
272+
273+
274+
275+
/* =============================================================================
276+
PLACEHOLDER Media Queries for Responsive Design.
277+
These override the primary ('mobile first') styles
278+
Modify as content requires.
279+
========================================================================== */
280+
281+
@media only screen and (min-width: 480px) {
282+
/* Style adjustments for viewports 480px and over go here */
283+
284+
}
285+
286+
@media only screen and (min-width: 768px) {
287+
/* Style adjustments for viewports 768px and over go here */
288+
289+
}
290+
291+
292+
/* =============================================================================
293+
Print styles.
294+
Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
295+
========================================================================== */
296+
297+
@media print {
298+
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
299+
a, a:visited { color: #444 !important; text-decoration: underline; }
300+
a[href]:after { content: " (" attr(href) ")"; }
301+
abbr[title]:after { content: " (" attr(title) ")"; }
302+
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
303+
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
304+
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
305+
tr, img { page-break-inside: avoid; }
306+
img { max-width: 100% !important; }
307+
@page { margin: 0.5cm; }
308+
p, h2, h3 { orphans: 3; widows: 3; }
309+
h2, h3{ page-break-after: avoid; }
310+
}

‎_site/examples/modular-backbone/index.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!doctype html>
2+
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
3+
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
4+
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
5+
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
6+
<head>
7+
<meta charset="utf-8">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9+
10+
<title></title>
11+
<meta name="description" content="">
12+
<meta name="author" content="">
13+
14+
<meta name="viewport" content="width=device-width,initial-scale=1">
15+
16+
<link rel="stylesheet" href="css/style.css">
17+
18+
<script data-main="js/main" src="js/libs/require/require.js"></script>
19+
</head>
20+
<body>
21+
22+
<div id="container">
23+
<div id="logo">
24+
<h1>Modular Backbone</h1>
25+
</div>
26+
<div id="menu">
27+
<ul>
28+
<li><a href="#">Home</a></li>
29+
<li><a href="#/projects">Project List</a></li>
30+
<li><a href="#/users">User List</a></li>
31+
</ul>
32+
</div>
33+
<div id="page">
34+
35+
</div>
36+
<div id="footer">
37+
Thomas Davis
38+
</div>
39+
</div>
40+
41+
</body>
42+
</html>

‎_site/examples/modular-backbone/js/app.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Filename: app.js
2+
define([
3+
'jQuery',
4+
'Underscore',
5+
'Backbone',
6+
'router', // Request router.js
7+
], function($, _, Backbone, Router){
8+
var initialize = function(){
9+
// Pass in our Router module and call it's initialize function
10+
Router.initialize();
11+
}
12+
13+
return {
14+
initialize: initialize
15+
};
16+
});

‎_site/examples/modular-backbone/js/boilerplate.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
define([
2+
'jQuery',
3+
'Underscore',
4+
'Backbone'
5+
], function($, _, Backbone){
6+
7+
return {};
8+
});

‎_site/examples/modular-backbone/js/collections/projects.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
define([
2+
'jQuery',
3+
'Underscore',
4+
'Backbone',
5+
'models/projects'
6+
], function($, _, Backbone, projectsModel){
7+
var projectsCollection = Backbone.Collection.extend({
8+
model: projectsModel,
9+
initialize: function(){
10+
11+
}
12+
13+
});
14+
15+
return new projectsCollection;
16+
});

‎_site/examples/modular-backbone/js/libs/backbone/backbone-min.js

+33
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_site/examples/modular-backbone/js/libs/backbone/backbone.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
define(['order!libs/backbone/backbone-min'], function(){
2+
_.noConflict();
3+
$.noConflict();
4+
return Backbone.noConflict();
5+
});

‎_site/examples/modular-backbone/js/libs/jquery/jquery-min.js

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_site/examples/modular-backbone/js/libs/jquery/jquery-serialize.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
jQuery.fn.serializeObject = function(){
2+
var arrayData, objectData;
3+
arrayData = this.serializeArray();
4+
objectData = {};
5+
6+
jQuery.each(arrayData, function() {
7+
var value;
8+
9+
if (this.value != null) {
10+
value = this.value;
11+
} else {
12+
value = '';
13+
}
14+
15+
if (objectData[this.name] != null) {
16+
if (!objectData[this.name].push) {
17+
objectData[this.name] = [objectData[this.name]];
18+
}
19+
20+
objectData[this.name].push(value);
21+
} else {
22+
objectData[this.name] = value;
23+
}
24+
});
25+
26+
return objectData;
27+
}

‎_site/examples/modular-backbone/js/libs/jquery/jquery.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
define([
2+
'order!libs/jquery/jquery-min',
3+
], function(){
4+
return $;
5+
});

‎_site/examples/modular-backbone/js/libs/require/require.js

+31
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_site/examples/modular-backbone/js/libs/underscore/underscore-min.js

+27
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_site/examples/modular-backbone/js/libs/underscore/underscore.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
define(['order!libs/underscore/underscore-min'], function(){
2+
return _;
3+
});

‎_site/examples/modular-backbone/js/main.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// Author: Thomas Davis <thomasalwyndavis@gmail.com>
2+
// Filename: main.js
3+
4+
// Require.js allows us to configure shortcut alias
5+
// There usage will become more apparent futher along in the tutorial.
6+
require.config({
7+
paths: {
8+
jQuery: 'libs/jquery/jquery',
9+
Underscore: 'libs/underscore/underscore',
10+
Backbone: 'libs/backbone/backbone',
11+
templates: '../templates'
12+
}
13+
14+
});
15+
16+
require([
17+
18+
// Load our app module and pass it to our definition function
19+
'app',
20+
21+
// Some plugins have to be loaded in order due to there non AMD compliance
22+
// Because these scripts are not "modules" they do not pass any values to the definition function below
23+
'order!libs/jquery/jquery-min',
24+
'order!libs/underscore/underscore-min',
25+
'order!libs/backbone/backbone-min'
26+
], function(App){
27+
// The "app" dependency is passed in as "App"
28+
// Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
29+
App.initialize();
30+
});

‎_site/examples/modular-backbone/js/models/projects.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
define([
2+
'Underscore',
3+
'Backbone'
4+
], function(_, Backbone) {
5+
var projectsModel = Backbone.Model.extend({
6+
defaults: {
7+
score: 10
8+
},
9+
initialize: function(){
10+
}
11+
12+
});
13+
return projectsModel;
14+
15+
});

‎_site/examples/modular-backbone/js/order.js

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_site/examples/modular-backbone/js/router.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Filename: router.js
2+
define([
3+
'jQuery',
4+
'Underscore',
5+
'Backbone',
6+
'views/projects/list',
7+
'views/users/list'
8+
], function($, _, Backbone, projectListView, userListView){
9+
var AppRouter = Backbone.Router.extend({
10+
routes: {
11+
// Define some URL routes
12+
'/projects': 'showProjects',
13+
'/users': 'showUsers',
14+
15+
// Default
16+
'*actions': 'defaultAction'
17+
},
18+
showProjects: function(){
19+
// Call render on the module we loaded in via the dependency array
20+
// 'views/projects/list'
21+
projectListView.render();
22+
},
23+
// As above, call render on our loaded module
24+
// 'views/users/list'
25+
showUsers: function(){
26+
userListView.render();
27+
},
28+
defaultAction: function(actions){
29+
// We have no matching route, lets just log what the URL was
30+
console.log('No route:', actions);
31+
}
32+
});
33+
34+
var initialize = function(){
35+
var app_router = new AppRouter;
36+
Backbone.history.start();
37+
};
38+
return {
39+
initialize: initialize
40+
};
41+
});

‎_site/examples/modular-backbone/js/text.js

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_site/examples/modular-backbone/js/views/projects/list.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// Filename: views/projects/list
2+
define([
3+
'jQuery',
4+
'Underscore',
5+
'Backbone',
6+
// Pull in the Collection module from above
7+
'collections/projects',
8+
'text!templates/projects/list.html'
9+
10+
], function($, _, Backbone, projectsCollection, projectListTemplate){
11+
var projectListView = Backbone.View.extend({
12+
el: $("#page"),
13+
initialize: function(){
14+
this.collection = projectsCollection;
15+
this.collection.bind("add", this.exampleBind);
16+
this.collection = projectsCollection.add({ name: "Twitter"});
17+
this.collection = projectsCollection.add({ name: "Facebook"});
18+
this.collection = projectsCollection.add({ name: "Myspace", score: 20});
19+
},
20+
exampleBind: function( model ){
21+
console.log(model);
22+
},
23+
render: function(){
24+
var data = {
25+
projects: this.collection.models,
26+
_: _
27+
};
28+
var compiledTemplate = _.template( projectListTemplate, data );
29+
$("#page").html( compiledTemplate );
30+
}
31+
});
32+
return new projectListView;
33+
});

‎_site/examples/modular-backbone/js/views/users/list.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// Filename: views/projects/list
2+
define([
3+
'jQuery',
4+
'Underscore',
5+
'Backbone',
6+
'text!templates/users/list.html'
7+
], function($, _, Backbone, userListTemplate){
8+
var userListView = Backbone.View.extend({
9+
el: $("#page"),
10+
initialize: function(){
11+
},
12+
render: function(){
13+
var data = {};
14+
var compiledTemplate = _.template( userListTemplate, data );
15+
this.el.html( compiledTemplate );
16+
}
17+
});
18+
return new userListView;
19+
});

‎_site/examples/modular-backbone/templates/projects/list.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<ul>
2+
<% _.each(projects, function(project){ %>
3+
<li><%= project.get("name") %> - <%= project.get("score") %></li>
4+
<% }); %>
5+
</ul>

‎_site/examples/modular-backbone/templates/users/list.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<ul>
2+
<li>User 1</li>
3+
</ul>

‎_site/organizing-backbone-using-modules/index.html

+63-28
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ <h1>Backbone Tutorials</h1>
9393
<h2>Organizing your application using Modules (require.js)</h2>
9494
<p>Unfortunatly Backbone.js does not tell you how to organize your code leaving many developers in the dark of how to load scripts and lay out their development enviroments.</p>
9595
<p>This was quite a different decision to other Javascript <span class="caps">MVC</span> frameworks who were more in favor of setting a development philosophy.</p>
96+
<p>Hopefully this tutorial will allow you to build a much more robust project with great separation of concerns between design and code.</p>
9697
<p>This tutorial will get you started on combining Backbone.js with <a href="http://www.com"><span class="caps">AMD</span></a> (Asynchronous Module Definitions).</p>
9798
<h3>What is <span class="caps">AMD</span>?</h3>
9899
<p><a href="http:www.com">Asynchronous Module Definitions</a> 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 <span class="caps">AMD</span>, seeing it as the future of modular Javascript development.</p>
@@ -102,29 +103,63 @@ <h3>What is <span class="caps">AMD</span>?</h3>
102103
<ul>
103104
<li>Modular</li>
104105
<li>Scalable</li>
106+
<li>Compiles well(see <a href="http://requirejs.org/docs/optimization.html">r.js</a>)</li>
107+
<li>Market Adoption( <a href="http://dojotoolkit.org/reference-guide/releasenotes/1.6.html">Dojo 1.6 converted fully to <span class="caps">AMD</span></a> )</li>
105108
</ul>
106109
<h3>Why Require.js?</h3>
107-
<p>Require.js has a great community.</p>
110+
<p>Require.js has a boastful community and is growing rapidly. <a href="http://tagneto.blogspot.com/">James Burke</a> the author updates Require.js almost daily and responds to user feedback always. A leading expert in script loading, he is also a contributer to the <span class="caps">AMD</span> specification.</p>
111+
<p><a href="https://twitter.com/jrburke" class="twitter-follow-button">Follow @jrburke</a><br />
112+
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></p>
108113
<h3>Getting started</h3>
109114
<p>To easily understand this tutorial you should jump straight into the example code base.</p>
110-
<h3><a href="http://www.com">Example Codebase</a></h3>
115+
<h3><a href="http://backbonetutorials.com/examples/modular-backbone">Example Codebase</a></h3>
116+
<p>The tutorial is only loosely coupled with the example and you will find the example to be more comprehensive.</p>
117+
<p>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)</p>
118+
<p>The example isn&#8217;t super fleshed out but should give you a vague idea.</p>
119+
<h3>Example File Structure</h3>
120+
<p>There are many different ways to lay out your files and I believe it is actually dependent on the size of the project. In the example below views and template s are mirroed in file structure. Collections and Models aren&#8217;t categorized into folders.</p>
111121
<div class="highlight"><pre><code class="javascript"><span class="cm">/* File Structure</span>
112-
<span class="cm">├── assets</span>
113-
<span class="cm">│ ├── css</span>
114-
<span class="cm">│ │ └── main.css</span>
115-
<span class="cm">│ ├── images</span>
116-
<span class="cm">│ │ └── header.gif</span>
117-
<span class="cm">│ └── js</span>
118-
<span class="cm">│ └── libs</span>
119-
<span class="cm">│ ├── backbone.js</span>
120-
<span class="cm">│ ├── jquery.js</span>
121-
<span class="cm">│ └── underscore.js</span>
122-
<span class="cm">├── index.html</span>
123-
<span class="cm">└── src</span>
124-
<span class="cm"> ├── application.js</span>
125-
<span class="cm"> └── modules</span>
126-
<span class="cm"> ├── friend.js</span>
127-
<span class="cm"> └── message.js</span>
122+
<span class="cm">├── imgs</span>
123+
<span class="cm">├── css</span>
124+
<span class="cm">│ └── style.css</span>
125+
<span class="cm">├── templates</span>
126+
<span class="cm">│ ├── projects</span>
127+
<span class="cm">│ │ ├── list.html</span>
128+
<span class="cm">│ │ └── edit.html</span>
129+
<span class="cm">│ └── users</span>
130+
<span class="cm">│ ├── list.html</span>
131+
<span class="cm">│ └── edit.html</span>
132+
<span class="cm">├── js</span>
133+
<span class="cm">│ ├── libs</span>
134+
<span class="cm">│ │ ├── jquery</span>
135+
<span class="cm">│ │ │ ├── jquery.min.js</span>
136+
<span class="cm">│ │ │ └── jquery.js // jQuery Library Wrapper</span>
137+
<span class="cm">│ │ ├── backbone</span>
138+
<span class="cm">│ │ │ ├── backbone.min.js</span>
139+
<span class="cm">│ │ │ └── backbone.js // Backbone Library Wrapper</span>
140+
<span class="cm">│ │ └── underscore</span>
141+
<span class="cm">│ │ │ ├── underscore.min.js</span>
142+
<span class="cm">│ │ │ └── underscore.js // Underscore Library Wrapper</span>
143+
<span class="cm">│ ├── models</span>
144+
<span class="cm">│ │ ├── users.js</span>
145+
<span class="cm">│ │ └── projects.js</span>
146+
<span class="cm">│ ├── collections</span>
147+
<span class="cm">│ │ ├── users.js</span>
148+
<span class="cm">│ │ └── projects.js</span>
149+
<span class="cm">│ ├── views</span>
150+
<span class="cm">│ │ ├── projects</span>
151+
<span class="cm">│ │ │ ├── list.js</span>
152+
<span class="cm">│ │ │ └── edit.js</span>
153+
<span class="cm">│ │ └── users</span>
154+
<span class="cm">│ │ ├── list.js</span>
155+
<span class="cm">│ │ └── edit.js</span>
156+
<span class="cm">│ ├── router.js</span>
157+
<span class="cm">│ ├── app.js</span>
158+
<span class="cm">│ ├── main.js // Bootstrap</span>
159+
<span class="cm">│ ├── order.js //Require.js plugin</span>
160+
<span class="cm">│ └── text.js //Require.js plugin</span>
161+
<span class="cm">└── index.html</span>
162+
128163
<span class="cm">*/</span>
129164
</code></pre>
130165
</div>
@@ -165,23 +200,23 @@ <h4>What does the bootstrap look like?</h4>
165200
<span class="c1">// There usage will become more apparent futher along in the tutorial.</span>
166201
<span class="nx">require</span><span class="p">.</span><span class="nx">config</span><span class="p">({</span>
167202
<span class="nx">paths</span><span class="o">:</span> <span class="p">{</span>
168-
<span class="nx">jQuery</span><span class="o">:</span> <span class="s2">&quot;libs/jquery/jquery&quot;</span><span class="p">,</span>
169-
<span class="nx">Underscore</span><span class="o">:</span> <span class="s2">&quot;libs/underscore/underscore&quot;</span><span class="p">,</span>
170-
<span class="nx">Backbone</span><span class="o">:</span> <span class="s2">&quot;libs/backbone/backbone&quot;</span>
203+
<span class="nx">jQuery</span><span class="o">:</span> <span class="s1">&#39;libs/jquery/jquery&#39;</span><span class="p">,</span>
204+
<span class="nx">Underscore</span><span class="o">:</span> <span class="s1">&#39;libs/underscore/underscore&#39;</span><span class="p">,</span>
205+
<span class="nx">Backbone</span><span class="o">:</span> <span class="s1">&#39;libs/backbone/backbone&#39;</span>
171206
<span class="p">}</span>
172207

173208
<span class="p">});</span>
174209

175210
<span class="nx">require</span><span class="p">([</span>
176211

177212
<span class="c1">// Load our app module and pass it to our definition function</span>
178-
<span class="s2">&quot;app&quot;</span><span class="p">,</span>
213+
<span class="s1">&#39;app&#39;</span><span class="p">,</span>
179214

180215
<span class="c1">// Some plugins have to be loaded in order due to there non AMD compliance</span>
181216
<span class="c1">// Because these scripts are not &quot;modules&quot; they do not pass any values to the definition function below</span>
182-
<span class="s2">&quot;order!libs/jquery/jquery-min&quot;</span><span class="p">,</span>
183-
<span class="s2">&quot;order!libs/underscore/underscore-min&quot;</span><span class="p">,</span>
184-
<span class="s2">&quot;order!libs/backbone/backbone-min&quot;</span>
217+
<span class="s1">&#39;order!libs/jquery/jquery-min&#39;</span><span class="p">,</span>
218+
<span class="s1">&#39;order!libs/underscore/underscore-min&#39;</span><span class="p">,</span>
219+
<span class="s1">&#39;order!libs/backbone/backbone-min&#39;</span>
185220
<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">App</span><span class="p">){</span>
186221
<span class="c1">// The &quot;app&quot; dependency is passed in as &quot;App&quot;</span>
187222
<span class="c1">// Again, the other dependencies passed in are not &quot;AMD&quot; therefore don&#39;t pass a parameter to this function</span>
@@ -279,7 +314,7 @@ <h3>App.js Building our applications main module</h3>
279314
<span class="s1">&#39;/users&#39;</span><span class="o">:</span> <span class="s1">&#39;showUsers&#39;</span><span class="p">,</span>
280315

281316
<span class="c1">// Default</span>
282-
<span class="s2">&quot;*actions&quot;</span><span class="o">:</span> <span class="s2">&quot;defaultAction&quot;</span>
317+
<span class="s1">&#39;*actions&quot;: &quot;defaultAction&#39;</span>
283318
<span class="p">},</span>
284319
<span class="nx">showProjects</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
285320
<span class="c1">// Call render on the module we loaded in via the dependency array</span>
@@ -293,7 +328,7 @@ <h3>App.js Building our applications main module</h3>
293328
<span class="p">},</span>
294329
<span class="k">default</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">actions</span><span class="p">){</span>
295330
<span class="c1">// We have no matching route, lets just log what the URL was</span>
296-
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;No route:&quot;</span><span class="p">,</span> <span class="nx">actions</span><span class="p">);</span>
331+
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;No route:&#39;</span><span class="p">,</span> <span class="nx">actions</span><span class="p">);</span>
297332
<span class="p">}</span>
298333
<span class="p">});</span>
299334

@@ -319,7 +354,7 @@ <h3>Modulizing a Backbone View</h3>
319354
<span class="s1">&#39;text!templates/project/list.html&#39;</span>
320355
<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">,</span> <span class="nx">projectListTemplate</span><span class="p">){</span>
321356
<span class="kd">var</span> <span class="nx">projectListView</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>
322-
<span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#container&quot;</span><span class="p">),</span>
357+
<span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#container&#39;</span><span class="p">),</span>
323358
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
324359
<span class="c1">// Using Underscore we can compile our template with data</span>
325360
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{};</span>

0 commit comments

Comments
 (0)
Please sign in to comment.