Reactive collection query in a template

Question

I have a Template named movies, that has a method that returns a list of objects from a collection. The query to generate that list of objects is created dynamically using data from another template method.

I would like to re-render the template, or just the components associated with that specific template method, whenever the filter data changes.

Here are the two methods used:

  Template.movies.filter = function () {                                             
    if (Session.equals("filter", undefined)) {                                       
      return {};
    }
    return Session.get("filter");                                                    
  };                                                                                 

  Template.movies.movies = function () {                                             
    return Movies.find(Template.movies.filter(), {sort: [["Poster", "desc"]]});
  };

On the HTML side it's a simple {{#each movies}}{{> movie}}{{/each}} to show the results from the movies method.

The problem is that when Session.get("filter") changes and therefore so does Template.movies.filter(), the HTML component relying on Template.movies.movies() data won't be updated with the new query results.

How would I achieve that behavior?

Answer 1

The easiest way is to just make a javascript function that both helpers utilize:

var getFilter = function() {
  if (Session.equals("filter", undefined)) {                                       
    return {};
  }
  return Session.get("filter")
}

Template.movies.filter = function() { return getFilter(); }
Template.movies.movies = function () {                                             
  return Movies.find(getFilter(), {sort: [["Poster", "desc"]]});
};

This will react as you expect.