Databases
StackOverflow2013
Postsdbo
POHow do I design MarionetteJS ItemView to properly show loading message?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I design MarionetteJS ItemView to properly show loading message?
    primarykey
    data
    text
    <p>First off - I am a MarionetteJS noob. </p> <p>I am having trouble making an ItemView display a loading message or throbber while it is being fetched. This is especially problematic when this ItemView is being displayed from a deep link in Backbone's history (i.e. the ItemView is the first page of the app being displayed since the user linked directly to it). I want to indicate that the page is loading (fetching), preferably with a simple view, and then show the real templated view with the fetched model. </p> <p>I have seen other answers on SO like Marionette.async, (which has been deprecated) and changing the template during ItemView.initalize(). </p> <p>Anybody (Derrick?) got any suggestions or best practices here?</p> <p>UPDATE:</p> <p>I am getting the model from the collection using collection.get(id), not using model.fetch() directly.</p> <p>After thinking about this, the real question is where should this be implemented: <li>I could change my controller to see if the model exists in the collection (and if the collection is loaded) and decide which view to show accordingly. this seems like a lot of boilerplate everywhere since this could happen with any ItemView and any controller.</p> <p><li>I could change my ItemView initialize to test for existence of the model (and a loaded collection), but same comment here: every ItemView could have this problem.</p> <p>UPDATE 2: This is what I ended up with, in case anybody else want this solution:</p> <pre><code>app.ModelLayout = Backbone.Marionette.Layout.extend({ constructor: function(){ var args = Array.prototype.slice.apply(arguments); Backbone.Marionette.Layout.prototype.constructor.apply(this, args); // we want to know when the collection is loaded or changed significantly this.listenTo(this.collection, "reset sync", this.resetHandler); }, resetHandler: function () { // whenever the collection is reset/sync'ed, we try to render the selected model if (this.collection.length) { // when there is no model, check to see if the collection is loaded and then try to get the // specified id to render into this view this.model = this.collection.get(this.id); } this.render(); }, getTemplate: function(){ // getTemplate will be called during render() processing. // return a template based on state of collection, and state of model if (this.model){ // normal case: we have a valid model, return the normal template return this.template; } else if (this.collection &amp;&amp; this.collection.isSyncing) { // collection is still syncing, tell the user that it is Loading return this.loadingView; } else { // we're not syncing and we don't have a model, therefore, not found return this.emptyView; } } }); </code></pre> <p>And here is how to use it: </p> <pre><code>// display a single model on a page app.Access.Layout.CardLayout = app.ModelLayout.extend({ regions: { detailsRegion:"#detailsRegion", eventsRegion:"#eventsRegion" }, template:"CardLayout", // this is the normal template with a loaded model loadingView:"LoadingView", // this is a template to show while loading the collection emptyView:"PageNotFoundView", // this is a template to show when the model is not found onRender : function() { this.detailsRegion.show( blah ); this.eventsRegion.show( blah ); } }); </code></pre> <p>thanks!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMark Lummus
    1. USMark Lummus
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow do I design MarionetteJS ItemView to properly show loading message?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow do I design MarionetteJS ItemView to properly show loading message?
      1. UST Nguyen
      1. VTFavorite
    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