1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
|
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Simple example - Node.js, Restify, MongoDb and Mongoose - Backbone.js Tutorials</title>
<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml">
<meta name="author" content="Backbone Tutorials" />
<!-- syntax highlighting CSS -->
<!-- syntax highlighting CSS -->
<link rel="stylesheet" href="/css/syntax.css" type="text/css" />
<!-- Homepage CSS -->
<link rel="stylesheet" href="//bootswatch.com/sandstone/bootstrap.min.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" />
<link href="https://fonts.googleapis.com/css?family=Arvo:400,700&subset=latin" rel="stylesheet" type="text/css">
<!-- Typekit -->
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div class="row">
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Backbone Tutorials</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class=""><a href="/">Tutorials</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li>
<li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">About</h3>
</div>
<div class="panel-body">
<div class="col-lg-4">
<p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p>
<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="col-lg-8">
<h3 >Backbone.js Beginner Video Tutorial</h3>
<img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p>
<a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a>
</div>
</div>
</div>
</div>
<div id="post">
<h1>Simple example - Node.js, Restify, MongoDb and Mongoose</h1>
<p>Before I start, the Backbone.js parts of this tutorial will be using techniques described in "Organizing your application using <a href="http://backbonetutorials.com/organizing-backbone-using-modules/">Modules</a> to construct a simple guestbook.</p>
<h2>Getting started</h2>
<p>To easily understand this tutorial you should jump straight into the example code base.</p>
<p><a href="https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/nodejs-mongodb-mongoose-restify">Example Codebase</a></p>
<p><a href="http://backbonetutorials.com/examples/nodejs-mongodb-mongoose-restify/app">Example Demo</a></p>
<p>This tutorial will assist you in saving data(Backbone.js Models) to MongoDb and retrieving a list(Backbone.js Collections) of them back.</p>
<h2>The technologies</h2>
<p>This stack is great for rapid prototyping and highly intuitive. Personal note: I love using JavaScript as my only language for the entire application (FrontEnd/BackEnd/API/Database). Restify is still in early development but is essentially just an extension of Express. So for anyone needing more stability you can easily just substitute Express in.</p>
<h3>Node.js</h3>
<p>"Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices."</p>
<h3>Restify</h3>
<p>"Restify is a node.js module built specifically to enable you to build correct REST web services. It borrows heavily from express (intentionally) as that is more or less the de facto API for writing web applications on top of node.js."</p>
<h3>MongoDb</h3>
<p>"MongoDB (from "humongous") is a scalable, high-performance, open source NoSQL database."</p>
<h3>Mongoose</h3>
<p>"Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment."</p>
<h2>Building the server</h2>
<p>In the example repository there is a server.js example which can be executed by running <code>node server.js</code>. If you use this example in your own applications make sure to update the Backbone.js <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/models/message.js">Model</a> and <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/collections/messages.js">Collection</a> definitions to match your server address.</p>
<h2>Restify configuration</h2>
<p>The first thing to do is require the Restify module. Restify will be in control of handling our restful endpoints and returning the appropriate JSON.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">restify</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'restify'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">server</span> <span class="o">=</span> <span class="nx">restify</span><span class="p">.</span><span class="nx">createServer</span><span class="p">();</span>
<span class="nx">server</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">restify</span><span class="p">.</span><span class="nx">bodyParser</span><span class="p">());</span></code></pre></div>
<p>Note: bodyParser() takes care of turning your request data into a JavaScript object on the server automatically.</p>
<h2>MongoDb/Mongoose configuration</h2>
<p>We simply want to require the MongoDb module and pass it a MongoDb authentication URI e.g. mongodb://username:server@mongoserver:10059/somecollection</p>
<p>The code below presupposes you have another file in the same directory called <code>config.js</code>. Your config should never be public as it contains your credentials. So for this repository I have added <code>config.js</code> to my <code>.gitignore</code> but added in a <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/config-sample.js">sample config</a>.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">mongoose</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'mongoose/'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./config'</span><span class="p">);</span>
<span class="nx">db</span> <span class="o">=</span> <span class="nx">mongoose</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">creds</span><span class="p">.</span><span class="nx">mongoose_auth</span><span class="p">),</span>
<span class="nx">Schema</span> <span class="o">=</span> <span class="nx">mongoose</span><span class="p">.</span><span class="nx">Schema</span><span class="p">;</span></code></pre></div>
<h2>Mongoose Schema</h2>
<p>Mongoose introduces a concept of <a href="http://mongoosejs.com/docs/model-definition.html">model/schema</a> enforcing types which allow for easier input validation etc</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Create a schema for our data</span>
<span class="kd">var</span> <span class="nx">MessageSchema</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Schema</span><span class="p">({</span>
<span class="nx">message</span><span class="o">:</span> <span class="nb">String</span><span class="p">,</span>
<span class="nx">date</span><span class="o">:</span> <span class="nb">Date</span>
<span class="p">});</span>
<span class="c1">// Use the schema to register a model with MongoDb</span>
<span class="nx">mongoose</span><span class="p">.</span><span class="nx">model</span><span class="p">(</span><span class="s1">'Message'</span><span class="p">,</span> <span class="nx">MessageSchema</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">Message</span> <span class="o">=</span> <span class="nx">mongoose</span><span class="p">.</span><span class="nx">model</span><span class="p">(</span><span class="s1">'Message'</span><span class="p">);</span></code></pre></div>
<p><em>Note: <code>Message</code> can now be used for all things CRUD related.</em></p>
<h2>Setting up the routes</h2>
<p>Just like in Backbone, Restify allows you to configure different routes and their associated callbacks. In the code below we define two routes. One for saving new messages and one for retrieving all messages. After we have created our function definitions, we attach them to either GET/POST/PUT/DELETE on a particular restful endpoint e.g. GET /messages</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// This function is responsible for returning all entries for the Message model</span>
<span class="kd">function</span> <span class="nx">getMessages</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Resitify currently has a bug which doesn't allow you to set default headers</span>
<span class="c1">// This headers comply with CORS and allow us to server our response to any origin</span>
<span class="nx">res</span><span class="p">.</span><span class="nx">header</span><span class="p">(</span><span class="s2">"Access-Control-Allow-Origin"</span><span class="p">,</span> <span class="s2">"*"</span><span class="p">);</span>
<span class="nx">res</span><span class="p">.</span><span class="nx">header</span><span class="p">(</span><span class="s2">"Access-Control-Allow-Headers"</span><span class="p">,</span> <span class="s2">"X-Requested-With"</span><span class="p">);</span>
<span class="c1">// .find() without any arguments, will return all results</span>
<span class="c1">// the `-1` in .sort() means descending order</span>
<span class="nx">Message</span><span class="p">.</span><span class="nx">find</span><span class="p">().</span><span class="nx">sort</span><span class="p">(</span><span class="s1">'date'</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">).</span><span class="nx">execFind</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">arr</span><span class="p">,</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">postMessage</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">res</span><span class="p">.</span><span class="nx">header</span><span class="p">(</span><span class="s2">"Access-Control-Allow-Origin"</span><span class="p">,</span> <span class="s2">"*"</span><span class="p">);</span>
<span class="nx">res</span><span class="p">.</span><span class="nx">header</span><span class="p">(</span><span class="s2">"Access-Control-Allow-Headers"</span><span class="p">,</span> <span class="s2">"X-Requested-With"</span><span class="p">);</span>
<span class="c1">// Create a new message model, fill it up and save it to Mongodb</span>
<span class="kd">var</span> <span class="nx">message</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Message</span><span class="p">();</span>
<span class="nx">message</span><span class="p">.</span><span class="nx">message</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">message</span><span class="p">;</span>
<span class="nx">message</span><span class="p">.</span><span class="nx">date</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">();</span>
<span class="nx">message</span><span class="p">.</span><span class="nx">save</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="c1">// Set up our routes and start the server</span>
<span class="nx">server</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'/messages'</span><span class="p">,</span> <span class="nx">getMessages</span><span class="p">);</span>
<span class="nx">server</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">'/messages'</span><span class="p">,</span> <span class="nx">postMessage</span><span class="p">);</span></code></pre></div>
<p>This wraps up the server side of things, if you follow the <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/server.js">example</a> then you should see something like</p>
<p><a href="http://backbonetutorials.nodejitsu.com/messages">http://backbonetutorials.nodejitsu.com/messages</a></p>
<p><em>Note: Again you must remember to change the <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/models/message.js">Model</a> and <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/collections/messages.js">Collection</a> definitions to match your server address.</em></p>
<h2>Setting up the client (Backbone.js)</h2>
<p>I've actually used the latest copy of <a href="http://backboneboilerplate.com">http://backboneboilerplate.com</a> to set up the example page.</p>
<p>The important files you will want to check out are;</p>
<ul>
<li>views/dashboard/page.js</li>
<li>views/guestbook/form.js</li>
<li>views/guestbook/list.js</li>
<li>models/message.js</li>
<li>collections/messages.js</li>
<li>templates/guestbook/</li>
</ul>
<h2>Saving a message</h2>
<p>First of all we want to setup a <a href="https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/templates/guestbook/form.html">template</a> for showing our form that creates new messages.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o"><</span><span class="nx">textarea</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"message"</span><span class="o">><</span><span class="err">/textarea></span>
<span class="o"><</span><span class="nx">button</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"post-message"</span><span class="o">></span><span class="nx">Post</span> <span class="nx">Message</span><span class="o"><</span><span class="err">/button></span></code></pre></div>
<p>This template gets inserted into the DOM by <code>views/guestbook/form.js</code>, this Backbone view also handles the interaction of the form and the posting of the new data.</p>
<p>Let us create a Backbone Model that has the correct URL for our restful interface.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">define</span><span class="p">([</span>
<span class="s1">'underscore'</span><span class="p">,</span>
<span class="s1">'backbone'</span>
<span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">Backbone</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">Message</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">url</span><span class="o">:</span> <span class="s1">'http://localhost:8080/messages'</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">Message</span><span class="p">;</span>
<span class="p">});</span></code></pre></div>
<p>We can see how we require our predefined model for messages and also our form template.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">define</span><span class="p">([</span>
<span class="s1">'jquery'</span><span class="p">,</span>
<span class="s1">'underscore'</span><span class="p">,</span>
<span class="s1">'backbone'</span><span class="p">,</span>
<span class="s1">'models/message'</span><span class="p">,</span>
<span class="s1">'text!templates/guestbook/form.html'</span>
<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">MessageModel</span><span class="p">,</span> <span class="nx">guestbookFormTemplate</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">GuestbookForm</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">el</span><span class="o">:</span> <span class="s1">'.guestbook-form-container'</span><span class="p">,</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">guestbookFormTemplate</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s1">'click .post-message'</span><span class="o">:</span> <span class="s1">'postMessage'</span>
<span class="p">},</span>
<span class="nx">postMessage</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">message</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">MessageModel</span><span class="p">();</span>
<span class="nx">message</span><span class="p">.</span><span class="nx">save</span><span class="p">({</span> <span class="nx">message</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.message'</span><span class="p">).</span><span class="nx">val</span><span class="p">()},</span> <span class="p">{</span>
<span class="nx">success</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">that</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'postMessage'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">GuestbookForm</span><span class="p">;</span>
<span class="p">});</span></code></pre></div>
<p><em>Note: <code>trigger</code> is from Backbone Events, I binded a listener to this view in <code>views/dashboard/page.js</code> so when a new message is submitted, the list is re-rendered. We are setting the date of the POST on the server so there is no need to pass it up.</em></p>
<h2>Retrieving a list of messages</h2>
<p>We setup a route on our server to generate a list of all available messages at <code>GET /messages</code>. So we need to define a collection with the appropriate <code>url</code> to fetch this data down.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">define</span><span class="p">([</span>
<span class="s1">'jquery'</span><span class="p">,</span>
<span class="s1">'underscore'</span><span class="p">,</span>
<span class="s1">'backbone'</span><span class="p">,</span>
<span class="s1">'models/message'</span>
<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">MessageModel</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">Messages</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">model</span><span class="o">:</span> <span class="nx">MessageModel</span><span class="p">,</span> <span class="c1">// Generally best practise to bring down a Model/Schema for your collection</span>
<span class="nx">url</span><span class="o">:</span> <span class="s1">'http://localhost:8080/messages'</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">Messages</span><span class="p">;</span>
<span class="p">});</span></code></pre></div>
<p>Now that we have a collection to use we can setup our <code>views/list.js</code> to require the collection and trigger a fetch. Once the fetch is complete we want to render our returned data to a template and insert it into the DOM.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">define</span><span class="p">([</span>
<span class="s1">'jquery'</span><span class="p">,</span>
<span class="s1">'underscore'</span><span class="p">,</span>
<span class="s1">'backbone'</span><span class="p">,</span>
<span class="s1">'collections/messages'</span><span class="p">,</span>
<span class="s1">'text!templates/guestbook/list.html'</span>
<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">MessagesCollection</span><span class="p">,</span> <span class="nx">guestbookListTemplate</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">GuestbookList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">el</span><span class="o">:</span> <span class="s1">'.guestbook-list-container'</span><span class="p">,</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">messages</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">MessagesCollection</span><span class="p">();</span>
<span class="nx">messages</span><span class="p">.</span><span class="nx">fetch</span><span class="p">({</span>
<span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">messages</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">that</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="nx">guestbookListTemplate</span><span class="p">,</span> <span class="p">{</span><span class="nx">messages</span><span class="o">:</span> <span class="nx">messages</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="nx">_</span><span class="o">:</span><span class="nx">_</span><span class="p">}));</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">GuestbookList</span><span class="p">;</span>
<span class="p">});</span></code></pre></div>
<p>The template file should iterate over <code>messages.models</code> which is an array and print out a HTML fragment for each model.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o"><%</span> <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">messages</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">message</span><span class="p">)</span> <span class="p">{</span> <span class="o">%></span>
<span class="o"><</span><span class="nx">p</span><span class="o">><%=</span> <span class="nx">message</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'message'</span><span class="p">)</span> <span class="o">%><</span><span class="err">/p></span>
<span class="o"><</span><span class="nx">em</span><span class="o">><%=</span> <span class="nx">message</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'date'</span><span class="p">)</span> <span class="o">%><</span><span class="err">/em></span>
<span class="o"><%</span> <span class="p">});</span> <span class="o">%></span></code></pre></div>
<p>This actually sums up everything you need to know to implement this simple example.</p>
<h2>Conclusion</h2>
<p><a href="https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/nodejs-mongodb-mongoose-restify">Example Codebase</a></p>
<p><a href="http://backbonetutorials.com/examples/nodejs-mongodb-mongoose-restify/app">Example Demo</a></p>
<p>In this example you should really be using relative URL's in your collections/models and instead setting a baseUrl in a config file or by placing your index.html file on the restful server.</p>
<p>This example is hosted on GitHub therefore we had to include the absolute URL to the server which is hosted on nodejitsu.com</p>
<p>On a personal note, I have of recent used the Joyent, Nodejitsu, MongoDbHq stack after they have now partnered up and I have nothing but good things to say. Highly recommend you check it out!</p>
<p>As always I hope I made this tutorial easy to follow!</p>
<p>Get in touch with me on twitter, comments or GitHub!</p>
<h3>Relevant Links</h3>
<p><a href="http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules">Organizing Your Backbone.js Application With Modules</a></p>
</div>
<hr />
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<div style="text-align: center;">
<img src="https://secure.gravatar.com/avatar/cff733cf90823edd218a834980379c61?s=170" class="img-circle" style=" padding:2px; border: 1px solid #ddd; width: 100px;">
<h2>Thomas Davis</h2>
<p>Founder of <a href="http://cdnjs.com">cdnjs.com</a>, <a href="http://jsonresume.org">jsonresume.org</a></p>
<p>Work with Drones, Open Source, Tech Policy, Javascript and Music. </p>
<div class="addthis_horizontal_follow_toolbox" style="padding-left: 33px;"></div>
<br />
<a href="https://github.com/thomasdavis">github.com/thomasdavis</a>
</div>
</div>
</div>
<hr />
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=thomasdavis" async="async"></script>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'bbtutes'; // required: replace example with your forum shortname
var disqus_url = 'http://backbonetutorials.com/nodejs-restify-mongodb-mongoose';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
</div>
<script src="//static.getclicky.com/js" type="text/javascript"></script>
<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript>
</body>
</html>
|
