Polymer 1.0：带输入元素的双向绑定
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Polymer 1.0：带输入元素的双向绑定相关的知识，希望对你有一定的参考价值。
Code
考虑以下Polymer自定义元素：
<dom-module id="test-element">
<template>
<input type="text" value="{{value}}">
<button>Reset</button>
</template>
<script>
Polymer({
is: 'test-element',
properties: {
'value': {
type: String,
reflectToAttribute: true,
notify: true,
value: null
}
}
});
</script>
</dom-module>
我在index.html中使用这个自定义元素，如下所示：
<html>
<head>
<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="test-element.html">
<title>Test App</title>
</head>
<body>
<test-element value="test"></test-element>
</body>
</html>
Question
我相信我已经宣布value财产是一种双向约束（notify: true）;然而，当我点击输入并键入一些文本（例如，"foo"）时，它没有反映在模型中（即调用document.querySelector('test-element').value返回我在index.html，"test"中设置的值）。有趣的是，输入的value属性正确更改，但我的test-element的value属性没有。我错过了什么？
我还应该注意到对document.querySelector('test-element').setAttribute('value', 'bar')的调用正常。
首先请注意notify属性中的reflectToAttribute和value字段告诉它如何对它的父母做出反应而不是如何绑定到孩子身上。
IOW，notify: true意味着使value从外部双向绑定，而不是从内部绑定。 reflectToAttribute: true告诉Polymer每次更改时都会将value写入属性（对性能不利）。
当你像<x-element foo="{{value}}">那样进行绑定时，它的x元素决定了foo是否是双向可绑定的。
像input这样的本地元素没有内置的双向绑定支持，而是使用Polymer的事件 - 观察者语法来双向绑定到输入。像所以<input value="{{value::change}}">。
这告诉Polymer每当this.value发射input.value事件时都会从input更新change。
你需要改变这个：
<input type="text" value="{{value}}">
成
<input type="text" value="{{value::input}}">
试试here。这说明聚合物要听取输入的事件。解释here（不太清楚IMO）。
正如Andrey和Scott Miles所提到的，这两种解决方案都可以通过本机HTML输入框实现双向绑定。
<input type="text" value="{{value::input}}">
<input type="text" value="{{value::change}}">
有一个重要的区别：
::更改只会在文本框失去焦点或按下输入时触发。
::输入将在每个按键时触发。
以上是关于Polymer 1.0：带输入元素的双向绑定的主要内容，如果未能解决你的问题，请参考以下文章