CODEWITHSUNDEEP
polymeronchangedom-repeat
Mbanolas
Mbanolas

Reputation: 13

Polymer get changes from template dom-repeat

In order to get the changes from the input I use the following 

    <template is="dom-repeat" items="{{employees}}">
    <div>First name: <input on-change="cambiado" value="{{item.first::change}}"></div>
    <div>Last name: <input on-change="cambiado" value="{{item.last::change}}"></div>
    </template> 
...
<script>
...
cambiado(e){
    var datos=this.employees[e.model.__data.index]
    setTimeout(function() {
        console.log(datos.first+'  '+datos.last)
    }, 1000);
}
...

</script>

but I am sure that Polymer can get the event in an easer way or just get the input changed. Thanks.

This the full element with the observers that does not work:

   <link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id='employee-list'>
    <template>
        <div>Employee List</div>
        <p></p>
        <template is="dom-repeat" items="{{employees}}">
            <div>First name: <input value="{{item.first}}"></div>
            <div>Last name: <input value="{{item.last}}"></div>
        </template>
    </template>

    <script>
        class EmployeeList extends Polymer.Element {
            static get is() { return 'employee-list' }
            static get properties() {
                return {
                    item: {
                        type: Object,
                        value: function () {
                            return {};
                        }
                    }
                }
            }
            static get observers() {
                return [
                    'itemChanged(item.*)'
                ]
            }
            constructor() {
                super()
                this.employees = [
                    { first: 'Bob', last: 'Li' },
                    { first: 'Ayesha', last: 'Johnson' },
                    { first: 'Fatma', last: 'Kumari' },
                    { first: 'Tony', last: 'Morelli' }
                ];
            }

            itemChanged(first) {
                if (first) {
                    console.log('new first: ' + first);
                } else {
                    console.log('first is undefined');
                }
            }
        }
        customElements.define(EmployeeList.is, EmployeeList)
    </script>
</dom-module>

Upvotes: 0

Views: 579

Answers (1)

Goce Ribeski
Goce Ribeski

Reputation: 1372

You can use observer, so when some property of the itemobject get changed named function is called:

observers: [
  'itemChanged(item.*, cambiado)'
]

Docs: https://www.polymer-project.org/1.0/docs/devguide/observers

Upvotes: 2

Related Questions