CODEWITHSUNDEEP
polymerpolymer-1.0
Jessica
Jessica

Reputation: 2067

Issue with two-way binding inside dom-repeat in Polymer 1.0

I have a simple template like this

<template is="dom-repeat" items="[[items]]">
    <paper-button active="{{item.selected}}" toggles raised>
        <span>[[item.selected]]</span>
    </paper-button>
</template>

If I activate the first paper-button in the list by tapping it and then call

this.set('items.0.selected', !this.items[0].selected);

It gets deactivated.

But then if I try the exact steps above again, the button doesn't get deactivated, which makes the button state and the selected value out of sync.

Why is it doing this? The issue can be replicated over here.

Upvotes: 1

Views: 467

Answers (1)

Justin XL
Justin XL

Reputation: 39006

Interesting question. So I tried to use a single paper-button binding to a single item instance and it turned out to be working fine, which got me thinking that it might have something to do with path binding inside an array.

So I then added a tap handler to the paper-button and every time it's tapped, do a notifyPath on the selected subproperty path with the value of itself -

this.notifyPath('items.0.selected', this.items[0].selected);

And it works.

Upvotes: 1

Related Questions