Databases
StackOverflow2013
Postsdbo
POUnderstanding Backbone.js view's collection and filtering/resetting (from Router, Event, etc)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUnderstanding Backbone.js view's collection and filtering/resetting (from Router, Event, etc)
    text
    copied!<p>I'm still getting comfortable with Backbone.js, and there are plenty of times when I really think I'm getting it - then something so trivial pops up and rocks my world and makes me rethink if I even get it at all. This is one of those moments - any help is greatly appreciated in advance.</p> <p>I have a View. It has a Collection (the View displays a list of sessions during a day one every hour type of thing). Initially, when the View is first created, I display the entire Sessions collection. Thats fine. At the top of the View I have 4 links for each day of the week (during our event) - 10th, 11th, 12th, 13th. I want the user to be able to click on a day and filter the list of sessions for that particular day (like I said, pretty trivial).</p> <p>So far I have it working this way:</p> <ol> <li><p>the Sessions Collection (base class) has method called filterByDay(day) that does the following:</p> <pre><code>filterByDay: function (day) { UGM.log('trying to filter by day of week: ' + day); return this.models.filter(function (s) { return moment.utc(s.get('StartTime')).format('DD') == day; }); } </code></pre></li> <li><p>the View is created and initialized with the full sessions collection.</p> <pre><code>new UGM.SessionsCollectionView({ collection: UGM.data.sessionsData }); </code></pre></li> <li><p>In my collection View - I have the following:</p> <pre><code>events: { 'click a.dayFilter':'filterByDay' }, filterByDay: function (e) { e.preventDefault(); var day = (this.$(e.currentTarget).attr('rel')*1); this.render(this.collection.filterByDay(day)); UGM.router.navigate("/sessions/" + day); } </code></pre></li> </ol> <p>So.. when the View boots up, its displaying the full sessions fine. The a tags with a class of dayFilter trigger the event appropriately, and the filterByDay in the View calls the Views render() method passing in the NEW filtered collection (from the model's method). Again so far so good.</p> <ol> <li><p>In my controller (router) I have the following (and this is the confusing part):</p> <pre><code>showSessions: function (animate, level) { var section = new UGM.SessionsLayout({ collection: UGM.data.sessions }); this.displaySection(section, 'root', 'sessions', animate); }, showSessionsByDay: function(day, animate, level){ //** Should the next line really be that convoluted?!?! **// var section = new UGM.SessionsLayout({ collection: new UGM.SessionsCollection(UGM.data.sessions.filterByDay(day)) }); //** Why cant it just look like this: **// //var section = new UGM.SessionsLayout({ collection: UGM.data.sessions.filterByDay(day) }); this.displaySection(section, 'root', 'sessions/' + day, false); }, </code></pre></li> </ol> <p>Note my comment above the line in question. All of my problems (logically) seem to stem from my lack of understanding exactly how collections filter, collection.models filter, and the fact that filter() seems to always return an array and not a collection. (which is why Im declaring a new base Collection inside my filter call from the Controller above).</p> <p>Sorry of this is confusing or doesnt make sense, but hopefully with this amount of detail someone can see a super obvious hole in my general logic with how im dealing with the collection to begin with.</p> <p>Thanks again for any help!!</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