Not sure how to best approach this as I have not seen an example of this anywhere.
Basically, a formatter defined like this:
...
addBindings: function(){
var collection = this.collection;
rivets.formatters.filterMatch = function(value){
return collection.filters == null || collection.filters === value;
};
this.rivetsView = rivets.bind(this.element, this);
},
...
in markup:
<ul id="todo-list" rv-each-item="collection#">
<li rv-class-editing="item.editing" rv-show="item#completed | filterMatch">
...
</li>
</ul>
this works pretty well (# is a custom adapter reading from the models in the collection, {{
/}}
used). filters typically can be null/undefined (all models), or boolean, which will match the model.completed
value.
the problem is if the collection.filters
changes, there is no way to refresh the current view - it only applies the cond to new items added to the collection.
is there a way to create a rv-show/hide cond that binds the property AND the formatter with the second property?
tried forcing manual this.rivetsView.sync()
etc and to no avail, it does not see a change in the models and keeps them shown. the filter is defined/controlled in another view component bound to the same collection.
A live example: http://fragged.org/epik-todomvc/
This maps to
view: https://github.com/epitome-mvc/epik-todomvc/blob/master/js/views/todo-list-view.js#L29-L43
and element: https://github.com/epitome-mvc/epik-todomvc/blob/master/index.html#L19-L32