I was banging my head against the desk trying to figure out why the following code, straight from the Marionette.js docs, wasn’t working:

 

In short, you instantiate a view, and in that instantiation, define a filter function. Then later on, you just change the view.filter, rerender, and boom! New filtered view. Right? No.

No matter what, my view simply didn’t reflect my new filter. At one point I set it to a function that simply returned false, and still stuff showed up! So then I entered a frustrated console.log to print “WTF!!” to the console whenever my original filter function was invoked. Weirdly, I noticed that it was always invoked, on every render, even if I “changed” my filter function.

So, I stepped into the debugger, and saw that where I was changing the filter, the view.filter didn’t even exist! It was undefined! What black magic madness is that?!

So, onwards to the Marionette source code. I stepped through, clicking idly, and noticed that view.render invokes Marionette.getOption. Looking at that:

So basically, the render function first checks for a filter in the view.options, which is where filters that are added during instantiation get stuck. If there’s no filter there, only then does it invoke whatever filter is attached directly on the view.

So, the example in the docs should actually be:

Luckily for those that aren’t stuck in the stone age, newer Marionette versions have  a setFilter() function available on views, so the above is irrelevant. We’ll upgrade some day…. some day….