Databases
StackOverflow2013
Postsdbo
POWhat's a good way to build a Backbone.js project?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat's a good way to build a Backbone.js project?
    text
    copied!<p>We're currently kicking off our first <a href="http://documentcloud.github.com/backbone/">Backbone.js</a> project here at work. In fact it's our first major JavaScript project apart from the odd jQuery stuff. </p> <p>Anyway, we struggle with the architecture for our stuff. What is the best way to sort stuff out? </p> <p>We've started with having everything in separate files broken up in folders for; views, models, collections and routers and then we include everything in our <code>index.html</code>. The issue, though, is that this leaves us with having to check for the document ready event in every file. Is this the best way to do it?</p> <p>Here's an example:</p> <p>This is the file called <code>PageModel</code>, the first line seems wrong...</p> <pre><code>$(function(){ app.models.Page = Backbone.Model.extend({ //stuff }); }); </code></pre> <p>Then in our <code>index.html</code> we have:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link href="assets/css/style.css" rel="stylesheet" type="text/css" /&gt; &lt;script type="text/javascript"&gt; var app = app || {}; app.models = app.models || {}; app.collections = app.collections || {}; app.views = app.views || {}; app.routers = app.collections || {}; app.templates = app.templates || {}; app.models.griditems = app.models.griditems || {}; app.views.griditems = app.views.griditems || {}; &lt;/script&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/libs/json2.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/libs/underscore-1.1.7.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/libs/backbone-0.5.3.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/models/GridItemModel.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/models/GalleryGridItemModel.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/models/NewsGridItemModel.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/models/VideoGridItemModel.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/collections/GridCollection.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/templates/Submenu.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/templates/GalleryGridItemTemplate.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/views/GridView.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/views/GridItemView.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/views/GalleryGridItemView.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/views/VideoGridItemView.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/routers/Router.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="assets/js/Application.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload