鉚釘JS數據顯示不起作用

-1

我想要做一個簡單的顯示/隱藏使用Rivets JS（以前使用Aurelia）。我認爲我有正確的代碼來完成這項工作後，通過各種網站查看，但它似乎沒有工作。鉚釘JS數據顯示不起作用

我的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 
});

支付列表中應顯示或隱藏基於選定的國家。任何幫助將是偉大的！

謝謝

來源

2017-02-21 PeterWalsby

需要使用rv-show而不是數據顯示。必須閱讀錯誤的文檔。

來源

2017-02-21 12:00:04 PeterWalsby

鉚釘JS數據顯示不起作用

回答

相關問題