CODEWITHSUNDEEP
javascriptarraysdata-bindingpolymer
Michael.Lumley
Michael.Lumley

Reputation: 2385

Polymer: Two Way Binding to a Child Element Inside a Dom-Repeat Template

I am very confused about data binding with arrays in polymer, and I have what I think is a very simple use case.

I have an element, with an array as a property, and I want to display a list of child elements for each item in the array.

<dom-module id="parent-element">
    <template>
        <h1>This is the parent!</h1>
        <template is="dom-repeat" items="{{arrayproperty}}" as="item">
            <child-element
                propertyone="{{item.propertyone}}"
                propertytwo="{{item.propertytwo}}">
            </child-element>
        </template>
    </template>
</dom-module>

This code works great. The appropriate number of child elements are created, and the attributes from the array are passed into the child elements. However, when the child element attributes are changed, those changes are not passed back up into the parent element array attribute. How do I configure this setup with two way binding so that the parent gets updates from the child elements?

Upvotes: 0

Views: 485

Answers (1)

Maria
Maria

Reputation: 5604

Make sure that in the child element you set notify: true in the property definitions.

From the docs:

If true, the property is available for two-way data binding.

Upvotes: 1

Related Questions