Databases
StackOverflow2013
Postsdbo
POView loading before main layout is loaded
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POView loading before main layout is loaded
    primarykey
    data
    text
    <p>This is a followup question from <a href="https://stackoverflow.com/questions/14819560/backbone-boilerplate-this-model-is-undefined">Backbone boilerplate: &quot;this.model is undefined&quot;</a>. I was able to work out some of the structure, but have run into a new problem. I'm using backbone boilerplate, which uses the layoutManager adapter for setting the views. The main view, as well as the subsequent first view, seems to be loading all of the assets correctly, though the subsequent view seems to be firing before the main view gets loaded in. Here is my router file:</p> <pre><code>define([ // Application. "app", //Modules "modules/homepage" ], function (app, Homepage) { "use strict"; // Defining the application router, you can attach sub routers here. var Router = Backbone.Router.extend({ initialize: function(){ var collections = { homepage: new Homepage.Collection() }; _.extend(this, collections); app.useLayout("main-frame").setViews({ ".homepage": new Homepage.Views.Index(collections) }).render(); }, routes:{ "":"index" }, index: function () { this.reset(); }, // Shortcut for building a url. go: function() { return this.navigate(_.toArray(arguments).join("/"), true); }, reset: function() { // Reset collections to initial state. if (this.homepage) { this.homepage.reset(); } // Reset active model. app.active = false; } }); return Router; } ); </code></pre> <p>And here's my module:</p> <pre><code>define([ "app", ["localStorage"] ], function(app){ "use strict"; var Homepage = app.module(); Homepage.Model = Backbone.Model.extend({ defaults: function(){ return { homepage: {} }; } }); Homepage.Collection = Backbone.Collection.extend({ //localStorage: new Backbone.LocalStorage("Homepage.Collection"), refreshFromServer: function() { return Backbone.ajaxSync('read', this).done( function(data){ console.log(data); //save the data somehow? }); }, /*model: Homepage.Model,*/ cache: true, url: '/app/json/test.json', initialize: function(options){ if (options) { this.homepage = options.homepage; }else{ //this.refreshFromServer(); } } }); Homepage.Views.Index = Backbone.View.extend({ template: "homepage", el: '#mainContent', serialize: function() { return { collection: this.options.homepage }; }, initialize: function(){ this.listenTo(this.options.homepage,{ "reset": this.render, "fetch": function(){ $(this.el).html("Loading..."); } }); } }); return Homepage; }); </code></pre> <p>As you can see, the "main-frame" template is the main template that gets loaded into the page. I want the homepage template to load in afterwards, which gets populated into the id "#mainContent". In this case though, "#mainContent" doesn't exist yet so the homepage template isn't loaded in anywhere.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USJeff Chew
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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