StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This code only declares the a view. Can you share the code the instantiates the view and displays it? <code>templateHelpers</code> will be called and the data passed to the template <strong>when the template is rendered</strong>. That is, you either need to show the view in a region which implicitly calls the <code>render</code> method on the view, or explicitly call the <code>render</code> method.</p> <p>To be useful, <code>templateHelpers</code> should return an object. For instance:</p> <pre><code>templateHelpers: function() { return {colLength: this.collection.length}; } </code></pre> <p>One important thing to keep in mind: <code>fetch</code> trigger an AJAX request that is done asynchronously. If you want to wait for the <code>fetch</code> to succeed before rendering the view, then you need to use <a href="https://github.com/derickbailey/backbone.marionette/blob/master/docs/marionette.async.md" rel="nofollow">Marionette.Async</a>.</p> <hr> <p><em><strong>Update based on the update question</em></strong></p> <p>To avoid calling <code>render</code> from the view's <code>initialize</code> and only do it when <code>render</code> is called externally, change your code to:</p> <pre><code>return Marionette.CompositeView.extend({ className: 'user-board', template: usersTemplate, itemView: userItemView, initialize: function () { this.collection = new UseList(); var that = this; this.defer = $.Deferred(); this.collection.fetch({ success: that.defer.resolve, error: that.defer.resolve }); }, appendHtml: function (collectionView, itemView) { collectionView.$el.find('ul.users-list').append(itemView.el); }, templateHelpers: function () { console.log(this.collection.length); // For greater flexibility and maintainability, don't override `serializeData`. return { weekly: this.options.weekly, users_length: this.collection.length }; }, render: function() { var that = this, args = arguments; $.when(this.defer).done(function() { Marionette.CompositeView.prototype.apply(that, args); }); } }); </code></pre> <p>I'm resolving <code>this.render</code> both on success and error, otherwise if there is an error the view will never render (unless that's what you want).</p> <p>Note that if you use Marionette.Async then you would return <code>this.defer</code> in the view's <code>beforeRender</code> and Marionette.Async would take care of delaying the rendering.</p> <p>Also note that once <code>this.defer</code> is resolved, future renders will run when called as there is nothing to wait for, until <code>this.defer</code> has been reset programmatically.</p>

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