リベッツJSデータショーが動作しない

Question

リベッツJS（以前はAureliaを使用）を使用して簡単な表示/非表示をしようとしています。私はさまざまなサイトを見た後に仕事をするための正しいコードを持っていると思ったが、うまくいかないようだ。

私の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> 

私の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 
}); 

支払いのリストは、選択した国に基づいて表示または非表示にする必要があります。 助けがあれば助かります！

おかげRVショーではなく、データのショーを使用するために必要な

Answer 1

。間違ったドキュメントを読んでいる必要があります。