CODEWITHSUNDEEP
polymer
Franz Thomsen
Franz Thomsen

Reputation: 484

Issue with data binding in Polymer templates

I have a page where I am binding an array to input fields. Data binding seems to be working somewhat strange.

Please have a look at below example

<!doctype html>
<html>
<head>
    <script src='bower_components/webcomponentsjs/webcomponents-lite.js'></script>
    <link rel='import' href='bower_components/polymer/polymer.html'>
    <link rel='import' href='bower_components/paper-input/paper-input.html'>
</head>
<body unresolved>
    <dom-module id='base-page'>
        <template>
            <template is='dom-repeat' as='cell' items='{{data}}'>
                <paper-input value='{{cell}}'></paper-input> 
            </template>
        </template>
    </dom-module>
    <script>
        Polymer({
            is: 'base-page',

            properties: {
                data: {
                    type: Array,
                    value: function() {
                        return [0,0]
                    }
                }
            }

        });
    </script>
    <base-page></base-page>
</body>

If I edit the content in the second paper-input, data is changed in both. If I however initialize my data array to e.g. [0, 1], then the cells apparently looks different to start with and therefore it is able to differentiate between the cells and data binding seems to work. Whats the issue?, but more importantly, how can I make it work?

Cheers and thanks :-)

Upvotes: 2

Views: 47

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657248

AFAIK plain numbers don't work well in arrays. Especially here where Polymer can't tell them apart properly if they have the same value.

Wrap them in objects like

return [{value: 0}, {value: 0}]

and then use it like

<paper-input value='{{cell.value}}'></paper-input>

Upvotes: 1

Related Questions