Question

I’ve recently built a requirejs/backbonejs module that builds a table on my page. The collection fetches the data and returns it in JSON, which i am parsing through and rendering. It works fine up to this point, and the table renders beautifully on the page.

The API i am using to fetch the data requires that i pass in a time range. So for the first draw of the table, i pass in a MS value to fetch the last 30 days of data.

I also have a filter section at the top of the page that allows me to choose how many days worth of data to fetch, either 1 week or 1 month.

how do i get this filter to reload the collection without redrawing the entire page? or am i just implementing backbone/require incorrectly?

Answer 1

Bang. Your last comment exactly.

You don’t even need to setup an event trigger with this setup. When you fetch the collection, Backbone will automatically trigger a reset event for you.

Say you have your parentView which is the entire page. Somewhere in that parent view is your dropdown filter that triggers a fetch() event. You fetch the appropriate data (1 week or 1 month) and reset your collection.

Your child view (subview) has an event listener that’s listening to your collection reset:

// Inside child view
// (the view that houses all the individual model views of the collection)

this.collection.on('reset', this.render, this);

And it simply re-renders itself when it hears that you reset your collection.

Note: once you get into the business of creating subviews and subviews of subviews, don’t forget to properly clean up those subviews when you remove parent views (meaning make sure they’re removed from the DOM AND detached from any event listeners they’re bound to.) Otherwise you get nasty Zombie Views which eat up resources and cause strange messes. It’s a popular recurring question here. 😉