如何将 iron-input 双向绑定到 dom-repeat 的项目?
How to two-way bind iron-input to dom-repeat's item?
我刚开始玩 Polymer 1.0,正在尝试对集合进行非常简单的绑定。我能够在 dom-repeat 内显示文本,但是 two-way 绑定到 iron-input 不起作用。
我尝试了字符串数组和对象。运气不好。
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-input/iron-input.html">
<dom-module id="hello-world">
<template>
<ul>
<template is="dom-repeat" items="{{data}}">
<li>{{item.value}}</li>
</template>
</ul>
<ul>
<template is="dom-repeat" items="{{data}}">
<li><input is="iron-input" bind-value="{{item.value}}"></input></li>
</template>
</ul>
</template>
</dom-module>
<script>
Polymer({
is: "hello-world",
ready: function() {
this.data = [
{ value: "Hello" },
{ value: "World!" }
];
}
});
</script>
更改为:value="{{item.value::input}}"
看这里:http://plnkr.co/edit/QWdCk7ReXxtdKndwPdqq
我刚开始玩 Polymer 1.0,正在尝试对集合进行非常简单的绑定。我能够在 dom-repeat 内显示文本,但是 two-way 绑定到 iron-input 不起作用。 我尝试了字符串数组和对象。运气不好。
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-input/iron-input.html">
<dom-module id="hello-world">
<template>
<ul>
<template is="dom-repeat" items="{{data}}">
<li>{{item.value}}</li>
</template>
</ul>
<ul>
<template is="dom-repeat" items="{{data}}">
<li><input is="iron-input" bind-value="{{item.value}}"></input></li>
</template>
</ul>
</template>
</dom-module>
<script>
Polymer({
is: "hello-world",
ready: function() {
this.data = [
{ value: "Hello" },
{ value: "World!" }
];
}
});
</script>
更改为:value="{{item.value::input}}"
看这里:http://plnkr.co/edit/QWdCk7ReXxtdKndwPdqq