StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>In a context of Backbone.View, as an example:</p> <pre><code>initialize: function() { this.state_loading(); // assuming this.collection is your collection which is not fetched yet... this.collection.bind('reset', this.state_loaded, this); this.collection.fetch(); }, state_loading: function() { this.el.addClass('st-loading'); }, state_loaded: function() { this.el.removeClass('st-loading'); } </code></pre> <p>Now class <code>.st-loading</code> on the View element will simply display a spinner wherever you need, e.g.</p> <pre><code>.ajax-spinner { backgrund: url('...'); display: none; } .st-loading .ajax-spinner { display: block; } </code></pre> <p>Now thoughts about your options:</p> <p><strong>Method 1:</strong> Don't override libraries. Next guy working on your code in production will curse you for that.</p> <p><strong>Method 2:</strong> You are better off triggering custom events on collection, you don't need to override any native Backbone methods. Again, this type of hacking is done only when you can't come up with good solutions.</p> <p><strong>Method 3:</strong> I guess your idea is that EVERY time something is loading you want to show a spinner? I would feel sorry for your users.</p> <p><strong>Method 4:</strong> If this is happening inside one view, you don't need to use event hubs. In the end, you can trigger custom event on a collection, and parent widget can subscribe to it. Another consideration is that you would most likely need to show spinner in different types of elements, and you would need to pass reference or selector for them for different views. Now if you want to have a universal solution, of course you can give your spinners same class application wide, but then you'll have a hell of headache if one day you want to remove them. You're definitely better off keeping these things localized to your views.</p> <p>We have similar situation in a large app which is Backbone-driven. And for this purpose we have an extension which we apply to views that need to display a spinner. It looks somewhat like this:</p> <pre><code>var state_loading: function() { if (arguments.length === 0 || arguments[0] === true) { this.el.addClass('st-loading'); } else { this.el.removeClass('st-loading'); } } var SomeView = Backbone.View.extend({ initialize: function(options) { this.options = _.extend({}, this.options || {}, options || {}); this.collection = this.options.collection; this.collection.bind('reset', this.render, this); this.state_loading(true); this.collection.fetch(); }, render: function() { this.state_loading(false); // your code... } }); _.extend(SomeView.prototype, state_loading); </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