聚合物从模板dom-repeat获得更改



为了从输入中获取更改,我使用以下

    <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> 

,但我确信聚合物可以以更安心的方式获得事件,或者只是更改输入。谢谢。

这是与观察者无效的完整元素:

   <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>

您可以使用观察者,因此,当item对象的某些属性被更改时,命名函数称为:

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

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

最新更新