Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>After much effort, I decided to move away from backbone-boilerplate, and now have the following setup using Backbone/RequireJS/localStorage adapter:</p> <p><strong>app.js:</strong></p> <pre><code>define([ 'jquery', 'underscore', 'backbone', 'router' // Request router.js ], function($, _, Backbone, Router){ var initialize = function(){ Router.initialize(); }; return { initialize: initialize }; }); </code></pre> <p><strong>main.js</strong>:</p> <pre><code>require.config({ paths: { jquery: 'libs/jquery', underscore: 'libs/underscore', backbone: 'libs/backbone', 'backbone.localStorage': 'libs/backbone.localStorage', templates: 'templates' }, shim: { underscore: { exports: '_' }, backbone: { deps: ['underscore','jquery'], exports: 'Backbone' }, 'backbone.localStorage': { deps: ['backbone'], exports: 'Backbone' } } }); require([ 'app' ], function(App){ App.initialize(); }); </code></pre> <p><strong>router.js</strong>:</p> <pre><code>define([ 'jquery', 'underscore', 'backbone', //Modules "modules/homepage" ], function ($, _, Backbone, Homepage) { "use strict"; // Defining the application router, you can attach sub routers here. var Router = Backbone.Router.extend({ routes:{ "":"index" } }); var initialize = function(){ var app_router = new Router; app_router.on('route:index', function(){ // Call render on the module we loaded in via the dependency array var collection = new Homepage.Collection(); var homepage; collection.fetch({ success: function(){ if(collection.length === 0){ console.log('refreshing from server...'); collection.refreshFromServer({ success: function(data){ collection.add(data); collection.invoke('save'); homepage = new Homepage.Views.Index({ collection: collection }).render(); } }) }else{ console.log('already loaded in localStorage...'); homepage = new Homepage.Views.Index({ collection: collection }).render(); } } }); }); Backbone.history.start(); }; return { initialize: initialize }; } ); </code></pre> <p><strong>homepage.js:</strong></p> <pre><code>define([ "jquery", "underscore", "backbone", "backbone.localStorage", "text!templates/homepage.html" ], function($, _, Backbone, localStorage, homepageTemplate){ "use strict"; var Homepage = { Views: {} }; Homepage.Model = Backbone.Model.extend({ defaults: function(){ return { homepageData: {} }; } }); Homepage.Collection = Backbone.Collection.extend({ localStorage: new Backbone.LocalStorage("RGPData"), refreshFromServer: function(options) { return Backbone.ajaxSync('read', this, options); }, url: 'json/test.json', model: Homepage.Model }); Homepage.Views.Index = Backbone.View.extend({ template:"homepage", el: '#mainContent', initialize: function(){ this.listenTo(this.collection, 'change', this.render); this.listenTo(this.collection, 'destroy', this.remove); }, render: function(){ console.log('rendering...'); $(this.el).html( homepageTemplate, this.collection); return this; } }); return Homepage; }); </code></pre> <p>The way this works, I have the app use the localStorage adapter, while having a "refreshFromServer" in my collection to read from a JSON file if the localStorage is empty. The collection is fetched in the router, before inserted into the view.</p> <p>This has been quite some time for me to discovery how everything works, so hopefully this answer will help anyone else out there get their footing a little bit better than I did.</p> <p>A couple of notes, I use text.js in order to bring in the template. </p> <p>Another note, I tried including backbone.localStorage and returning as just 'Backbone' (as depicted in <a href="http://kilon.org/blog/2012/08/build-backbone-apps-using-requirejs/" rel="nofollow">http://kilon.org/blog/2012/08/build-backbone-apps-using-requirejs/</a>), but for some reason that didn't work and my homepage.js file kept saying "Backbone.Model is not defined". Therefore I ended up including both in the define.</p>
    singulars
    1. This table or related slice is empty.
    1. POView loading before main layout is loaded
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USJeff Chew
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POView loading before main layout is loaded
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COI ran into the same problem with Kilon's example, and have a SO question about it. http://stackoverflow.com/questions/18034235/backbone-localstorage-require-js-uncaught-typeerror-undefined-is-not-a-funct
      singulars
      1. PO
      1. USP. Myer Nore
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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