refreshing rivets.js rv-show bound to a value via a custom formatter via another value

1.6k Views Asked by At

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

0

There are 0 best solutions below