CODEWITHSUNDEEP
javascriptjqueryrivets.js
abl
abl

Reputation: 5958

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

I am new to Rivets.js. Given this code:

<div id="main">

  <div>
    <button rv-on-click="toggle">
      Toggle
    </button>
  </div>

  <div>
    Dynamic headers sould be 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 the table's dynamic headers to show up or not depending on the value of showDynamicHeaders. But it doesn't seem to work; instead, the headers are visible or not depending on the initial value of showDynamicHeaders, but their visibility doesn't change when the value is updated.

See this fiddle for a live example.

I am doing something wrong?

Upvotes: 2

Views: 1981

Answers (2)

Steve Childs
Steve Childs

Reputation: 1872

Although not related to your problem I found this question whilst searching for rv-show not working within an array loop - turns out the rv-show binding needs either boolean or integer values passed to it. "0" or "1" always evaluate to true, so in my case I just cast the data to an integer and it worked as intended.

Just added that in case someone else stumbles over this question with the same cause as me, especially if dealing with AJAX data.

Upvotes: 0

David784
David784

Reputation: 7464

Try moving your rv-show to the <table> tag, like this:

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

working fiddle

Edit: Another option would be to add a rv-class tag in the each, like 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 the rv-class method

Upvotes: 1

Related Questions