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
<h2>Cross Browser problems when consuming your own <spanclass="caps">API</span></h2>
74
79
<p>This tutorial aims to help those who have separated their front-end completely from their back-end by building a restful interface as the mediator between the two.</p>
75
80
<p>Consuming your own public api has great benefits and sites such as foursquare have <ahref="http://engineering.foursquare.com/2011/12/08/web-sites-are-clients-too/">recently</a> converted.</p>
<p>To continue you must really understand what we are aiming towards as described in the introduction.</p>
151
+
</code></pre></div><p>To continue you must really understand what we are aiming towards as described in the introduction.</p>
149
152
<h3>Bootstrapping your application</h3>
150
153
<p>Using Require.js we define a single entry point on our index page.<br/>
151
154
We should setup any useful containers that might be used by our Backbone views.</p>
@@ -166,9 +169,7 @@ <h3>Bootstrapping your application</h3>
166
169
167
170
<spanclass="nt"></body></span>
168
171
<spanclass="nt"></html></span>
169
-
</code></pre>
170
-
</div>
171
-
<p>You should most always end up with quite a light weight index file. You can serve this off your server and then the rest of your site off a <spanclass="caps">CDN</span> ensuring that everything that can be cached, will be.</p>
172
+
</code></pre></div><p>You should most always end up with quite a light weight index file. You can serve this off your server and then the rest of your site off a <spanclass="caps">CDN</span> ensuring that everything that can be cached, will be.</p>
172
173
<h4>What does the bootstrap look like?</h4>
173
174
<p>Our bootstrap file will be responsible for configuring Require.js and loading initially important dependencies.</p>
174
175
<p>In the below example we configure Require.js to create shortcut alias to commonly used scripts such as jQuery, Underscore and Backbone.</p>
@@ -204,9 +205,7 @@ <h4>What does the bootstrap look like?</h4>
204
205
<spanclass="c1">// Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function</span>
</code></pre></div><h3>How should we lay out external scripts?</h3>
210
209
<p>Any modules we develop for our application using <spanclass="caps">AMD</span>/Require.js will be asynchronously loaded.</p>
211
210
<p>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.</p>
212
211
<p>Below I propose a solution(until these libraries allow themselves to be loaded asynchronously) to allow these libraries to be loaded properly(synchronously) and also removing themselves from global scope.</p>
@@ -219,17 +218,13 @@ <h3>How should we lay out external scripts?</h3>
219
218
<spanclass="c1">// Tell Require.js that this module returns a reference to jQuery</span>
<spanclass="c1">// What we return here will be used by other modules</span>
259
252
<spanclass="p">});</span>
260
-
</code></pre>
261
-
</div>
262
-
<p>The first argument of the define function is our dependency array, we can pass in any modules we like in the future.</p>
253
+
</code></pre></div><p>The first argument of the define function is our dependency array, we can pass in any modules we like in the future.</p>
263
254
<h3>App.js Building our applications main module</h3>
264
255
<p>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.</p>
265
256
<p>The router will then load the correct dependencies depending on the current <spanclass="caps">URL</span>.</p>
@@ -279,9 +270,7 @@ <h3>App.js Building our applications main module</h3>
</code></pre></div><h3>Modularizing a Backbone View</h3>
328
315
<p>Backbone views most usually always interact with the <spanclass="caps">DOM</span>, using our new modular system we can load in Javascript templates using Require.js text! plugin.</p>
<p>Javascript templating allows us to seperate the design from the application logic placing all our html in the templates folder.</p>
339
+
</code></pre></div><p>Javascript templating allows us to seperate the design from the application logic placing all our html in the templates folder.</p>
355
340
<h3>Modularizing a Collection, Model and View</h3>
356
341
<p>Now we put it altogether by chaining up a Model, Collection and View which is a typical scenairo when building a Backbone.js application.</p>
357
342
<p>First off we will define our model</p>
@@ -368,9 +353,7 @@ <h3>Modularizing a Collection, Model and View</h3>
368
353
<spanclass="c1">// You usually don't return a model instantiated</span>
<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.</p>
356
+
</code></pre></div><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.</p>
374
357
<p>“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.”</p>
<h3style="margin-bottom:15 px;">Backbone.js Beginner Video Tutorial</h3><imgsrc="/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>
0 commit comments