javascript - Rivets.js rv-show not working with rv-each -

i new rivets.js. given code:

<div id="main">    <div>     <button rv-on-click="toggle">       toggle     </button>   </div>    <div>     dynamic headers sould visible: {showdynamicheaders}   </div>    <table>     <thead>       <tr>         <th>fixed header</th>         <th>fixed header</th>         <th rv-show="showdynamicheaders" rv-each-item="items">           {item.name}         </th>       </tr>     </thead>   </table>  </div> 

var rvcontext = {}; var rview = rivets.bind($("#main"), rvcontext);    rvcontext.showdynamicheaders = true;  rvcontext.items = [   {     name : "dynamic header 1"   },{     name : "dynamic header 2"   },{     name : "dynamic header 3"   } ];  rvcontext.toggle = function(){   rvcontext.showdynamicheaders = !rvcontext.showdynamicheaders; } 

i'd expect table's dynamic headers show or not depending on value of showdynamicheaders. doesn't seem work; instead, headers visible or not depending on initial value of showdynamicheaders, visibility doesn't change when value updated.

see this fiddle live example.

i doing wrong?

try moving rv-show <table> tag, this:

<table rv-show="showtable" >     <tbody>       <tr rv-each-item="items">         <td>{item.name}</td>       </tr>     <tbody>   </table> 

working fiddle

edit: option add rv-class tag in each, this:

 <div rv-each-i="data" rv-class-hide="i.a | neq 1">     {i.a} - {i.b} ({i.c})  </div> 

javascript:

var data = [     {a:1, b:"testing1", c:true},     {a:1, b:"testing1a", c:true},     {a:1, b:"testing1b", c:true},     {a:2, b:"testing2", c:false},     {a:2, b:"testing2a", c:true},     {a:50, b:"testing50", c:false} ];  rivets.formatters.neq = function(val, v2) { return val!=v2;};  $(document).ready(function() {     var $r = $('#rivets');   rivets.bind($r, {data:data}); }); 

working fiddle of rv-class method