Rivets JS data-show not working

Question

I am trying to do a simple show/hide using Rivets JS (previously using Aurelia). I thought i had the right code to do the job after looking through various sites however it doesnt seem to be working.

my HTML:

<div id="Payments">
  <h1 rv-text="data.title"></h1>

  <div class="col-md-4">
            <select rv-value="data.selectedVal" class="form-control">
                <option value="0" selected></option>
                <option rv-each-country="data.countries" rv-value="country.id" rv-text="country.name"></option>
            </select>
        </div>

    <div class="container" style="padding-top:40px;">    
        <div class="row">
            <table class="table .table-responsive table-hover">
                <tbody>
                    <tr rv-each-product="data.products" data-show="data.selectedVal | eq product.id" >
                        <td rv-text="product.title" ></td>
                        <td rv-text="product.id"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

my js:

var data = {
title: 'Welcome to Payments',

products: [
  {
    title: 'MasterCard',
    id: 'CH'
  },
  {
    title: 'Visa',
    id: 'UK'
  },
  {
    title: 'PayPal',
    id: 'US'
  },
  {
    title: 'Cheque',
    id: 'UK'
  },
  {
    title: 'Cash',
    id: 'US'
  }],

countries: [
  {
    name: 'China',
    id: 1
  },
  {
    name: 'USA',
    id: 'US'
  },
  {
    name: 'UK',
    id: 'UK'
  }

  ],

  selectedVal: ''
};

rivets.formatters.eq = function (value, args) {
debugger;
return value === args;
};


rivets.bind(
document.querySelector('#Payments'), // bind to the element with id "candy-   shop"
{
data: data // add the data object so we can reference it in our template
});

The List of payment should show or hide based on the selected country. Any help would be great!

Thanks

Answer 1

Needed to use rv-show and not data-show. Must have read the wrong documentation.