为了从输入中获取更改,我使用以下内容
<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>
但我确信 Polymer 可以更轻松地获取事件,或者只是更改输入。谢谢。
这是观察者不起作用的完整元素:
<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>