Polymer "dom-if" 使用切换和项目 属性

Question

目标

我想使用切换来过滤（或通过 dom-if 隐藏）基于切换本身和元素的布尔值 属性 的元素。

所以对象数组：

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

我想用开关隐藏 "active:false" 个对象。

问题

我无法弄清楚如何让 if 函数“_showAlert(item)”在切换开关上触发，或者更重要的是，如果这就是我应该使用 Polymer 进行此操作的方式。我将不胜感激。

<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" 属性 之间的绑定是否有效。

谢谢！

Answer 1

我假设您希望 showAlert 函数在每次 item.active 或 activeOnly 更改时重新计算。为此，您必须将它们作为参数传递给函数（另请参阅 docs）。

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