聚合物「DOM-如果」使用肘節和項目屬性

我想要使用一個切換到過濾器（或通過DOM-如果隱藏）元件基於所述肘節本身和的布爾屬性元素。

因此，與對象的數組：

[{..., active: true}, {..., active: false}]

我想隱藏：通過切換「主動假」的對象。

問題

我無法弄清楚如何獲得IF函數「_showAlert（項目）」火撥動開關或更重要的是，如果這是連我應該去了解這個用聚合物的方法。我會很欣賞指導。

<paper-toggle-button checked="{{activeOnly}}">Active Only</paper-toggle-button> 
<paper-listbox> 
    <template is="dom-repeat" items="[[alerts]]"> 
     <template is="dom-if" if="{{_showAlert(item)}}"> 
      <paper-item>...</paper-item> 
     </template> 
    </template> 
</paper-listbox> 

<script> 
    (function() { 
     'use strict'; 
     Polymer({ 
      is: 'alert-list', 
      properties: { 
       alerts: { 
        type: Array 
       }, 
       activeOnly: { 
        type: Boolean, 
        notify: true 
       } 
      }, 
      ready: function(){ 
       this.alerts = [{..., active: true}, {..., active: false}]; 
      }, 
      _showAlert: function(item) { 
       // The alert item will have a boolean property called "active" 
       return (item.active || !this.activeOnly); 
      } 
     }) 
    })(); 
</script>

我剛剛在ready函數中附加了一些數據，用於開發目的。我可以讓列表顯示得很好，我可以驗證切換和「activeOnly」屬性正在工作的綁定。

謝謝！

來源

2016-06-28 Fuzzifized

我想你會想要你的showAlert函數重新評估每次或者item.active或activeOnly更改。爲了達到這個目的，你必須將它們作爲參數傳遞給函數（參見docs）。

<template is="dom-if" if="{{_showAlert(item.active, activeOnly)}}">

來源

2016-06-28 19:05:16 Maria

謝謝。我沒有想到這一點，因爲傳遞一個我已經訪問過的屬性似乎最初是違反直覺的。 – Fuzzifized

是的，我有點同意。你甚至不必在函數中使用必要的參數。這只是一種讓框架知道何時應該觸發該功能的方法。 – Maria

備註：如果某個項目缺少「active」屬性，它將永遠不會調用_showAlert，也不會呈現，即使函數中的條件將使用未定義的值評估爲true。所以我需要確保所有數據都有財產或只是發送物品。如果這聽起來不對，請告訴我。有點困惑.. – Fuzzifized

聚合物「DOM-如果」使用肘節和項目屬性

回答

相關問題