StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>First <code>fetch</code> is <strong>Asynchronous</strong></p> <p>So you are trying to filter the collection immediately after the fetch request. But the statements following them will simply execute immediately without waiting for the new data. You need to listen to the <code>reset</code> event or the sync event of the collection if you want the new data in hand. Also it is a better idea if you attach the common <code>attributes</code> to the view directly using <code>this</code> .. Try this</p> <pre><code>var VideosView = Backbone.View.extend({ tagName: 'ul', id: 'video-list', initialize: function () { // Model this.user = this.model; // collection passed in this.videos = this.collection; // videos on model this._videos = user.get('videos'); // filtered collection this.user_vids = videos.filter_videos(this._videos); // Listen to sync request on model this.listenTo(user, 'sync', this.update); // Listen to the video collection // which will call the method once the collection is refreshed this.listenTo(this.videos, 'reset', this.resetVideos); }, update: function () { $('#video-list').empty(); _.delay( function() { // You already have access to videos // in the form of this.videos this.videos.fetch({reset: true}); }, 100 ); }, resetVideos: function () { // Build the new user_vids collection from // newly fetch videos collection this.user_vids = this.videos.filter_videos(this._videos) this.user_vids.each(this.addOne, this); }, addOne: function (video) { var videoView = new VideoView({ model: video }); this.$el.append(videoView.render().el); }, render: function () { this.user_vids.each(this.addOne, this); return this; } }); </code></pre> <p>Let me know if the notes make sense or I misunderstood somewhere.</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