Thursday, February 20, 2020

polymer bi-directional databind within dom-repeat

Two-way databinding in dom-repeat could be based on extending the item model with component-specific field ( where it is a good habit to use component-specific prefix).

In sample the fieldset is shown only upon checkbox selection.

<ul>
    <template is="dom-repeat" items="[[forms]]">
        <paper-checkbox label="Enable [[item.name]]" checked="{{item.fieldset_enabled}}"></paper-checkbox>
        <template is="dom-if" if="[[item.fieldset_enabled]]">
            <fieldset><legend> '[[item.name]]' section </legend>
                ...
            </fieldset>
        </template>
    </template>
</ul>

No comments:

Post a Comment