铆钉 JS 数据显示不工作

Question

我正在尝试使用 Rivets 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
});

付款列表应根据所选国家/地区显示或隐藏。 任何帮助都会很棒！

谢谢

Answer 1

需要使用 rv-show 而不是 data-show。一定是阅读了错误的文档。