Polymer 1.0 deep path array binding

Question

I am trying to get the following to work. It initially of course renders the content of parentItems, but when changing it, the template looping over the parentItems is not invoked. I have looked at the notifyPath, but am not sure if this is the right direction

<!doctype html>
<html>
    <head>
        <script src='bower_components/webcomponentsjs/webcomponents-lite.min.js'></script>
        <link rel='import' href='bower_components/paper-button/paper-button.html'>
    </head>
    <body>
        <dom-module id='my-element'>
            <template>
                <template is='dom-repeat' items='{{parentValues}}'>
                    <template is='dom-repeat' items='{{item.childValues}}'>
                        <div>{{item.value}}</div>
                    </template>
                </template>
                <paper-button on-tap='click'>click me</paper-button>
            </template>
        </dom-module>
        <script>
            Polymer({
                is: 'my-element',
                properties: {
                    parentValues: {
                        type: Array,
                        value: function() { return [ { childValues: [ { value: 'original value' } ] } ]}
                    }
                },

                click: function() {
                    this.parentValues[0].childValues[0].value = 'new value';
                }
            });
        </script>
        <my-element></my-element>
    </body>
</html>

How can I get it to work?

Thanks a million :-)

jean Pokou jean Pokou · Accepted Answer · 2015-11-04T13:01:18

You need to use dom-repeat with as scope in your binding, and notifyPath to bubble up change to your array when changed

<!doctype html>
<html>
    <head>
        <script src='bower_components/webcomponentsjs/webcomponents-lite.min.js'></script>
        <link rel='import' href='bower_components/paper-button/paper-button.html'>
    </head>
    <body>
        <dom-module id='my-element'>
            <template is='dom-repeat' items='{{parentValues}}' as ="parent">
                    <template is='dom-repeat' items='{{parent.childValues}}' as="child">
                        <div>{{child.value}}</div>
                    </template>
                </template>
                <paper-button on-tap='click'>click me</paper-button>
            </template>
        </dom-module>
        <script>
            Polymer({
                is: 'my-element',
                properties: {
                    parentValues: {
                        type: Array,
                        value: function() { return [ { childValues: [ { value: 'original value' } ] } ]}
                    }
                },

                click: function() {
                // notify path to the properties using the polymer syntax
                    this.set('parentValues.0.childValues.0.value','changed value');
                }
            });
        </script>
        <my-element></my-element>
    </body>
</html>

Polymer 1.0 deep path array binding

2 Answers