CODEWITHSUNDEEP
javascriptpolymerpolymer-1.0
Fuzzifized
Fuzzifized

Reputation: 84

Polymer "dom-if" using toggle and item property

Goal

I'm wanting to use a toggle to filter (or hide via dom-if) elements based on the toggle itself and a boolean property of the element.

So with an array of objects:

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

I want to hide the "active:false" objects with the toggle.

Problem

I can't figure out how to get the if function "_showAlert(item)" to fire on toggle switch or more importantly if this is even the way I should go about this using Polymer. I'd appreciate guidance on either.

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

I've just appended some data in the ready function for now for development purposes. I can get the list to display just fine and I can verify the binding between the toggle and the "activeOnly" property is working.

Thanks!

Upvotes: 1

Views: 614

Answers (1)

Maria
Maria

Reputation: 5604

I assume you would want your showAlert function to re-evaluate every time either item.active or activeOnly change. To achieve that you have to pass them to the funciton as arguments (also see docs). 

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

Upvotes: 1

Related Questions