【问题标题】：Polymer 1.0: Two-way bindings with input elementsPolymer 1.0：输入元素的双向绑定
【发布时间】：2015-08-30 08:50:47
【问题描述】：

代码

考虑以下 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>

问题

我相信我已经将value 属性声明为双向绑定（notify: true）；然而，当我单击输入并输入一些文本（例如，"foo"）时，它不会反映在模型中（即，对document.querySelector('test-element').value 的调用会返回我在 index.html 中设置的值，"test"）。有趣的是，输入的 value 属性正确更改，但我的 test-element 的 value 属性没有。我错过了什么？

我还应该注意，对document.querySelector('test-element').setAttribute('value', 'bar') 的调用可以正常工作。

【问题讨论】：

标签： javascript polymer custom-element

【解决方案1】：

首先请注意，value 属性上的 notify 和 reflectToAttribute 字段告诉它如何对其父级做出反应，而不是如何绑定到子级。

IOW，notify: true 表示使value 可以从外部双向绑定，而不是从内部。 reflectToAttribute: true 告诉 Polymer 每次更改属性时都将 value 写入属性（对性能不利）。

当您执行<x-element foo="{{value}}"> 之类的绑定时，x-element 决定foo 是否可双向绑定。

像input 这样的原生元素没有内置双向绑定支持，而是使用 Polymer 的事件观察器语法对输入进行双向绑定。像这样 <input value="{{value::change}}">.

这告诉 Polymer 每当 input 触发 change 事件时从 input.value 更新 this.value。

【讨论】：

谢谢。内部/外部的区别现在对我来说很有意义。我已请求编辑添加文档链接。
我想指出一个细微差别Scott Miles，因为属性声明中的readOnly 字段不仅仅控制属性对本地DOM 之外的元素的行为，而是本地 DOM 中的元素也是如此。 IOW，如果我将一个属性设置为只读，那么它对于孩子和祖先都是只读的。
明确一点，这并不是说只读属性永远不可修改；只读属性可通过特殊的 setter 方法修改，但据我所知，它不是通过使用数据绑定 API。
你先生，应该得到奖章

【解决方案2】：

你需要改变这个：

<input type="text" value="{{value}}">

进入

<input type="text" value="{{value::input}}">

试试here。这表示聚合物可以监听输入的事件。解释here（不是很清楚IMO）。

【讨论】：

你说得对，有点埋在文档的某个地方；我已经用文档链接编辑了上面的答案（等待同行评审），但我也会把它粘贴在这里，让任何人都能轻松找到它：polymer-project.org/1.0/docs/devguide/…

【解决方案3】：

正如 Andrey 和 Scott Miles 所提到的，这两种解决方案都可以通过原生 HTML 输入框实现双向绑定。

<input type="text" value="{{value::input}}">

<input type="text" value="{{value::change}}">

有一个重要的区别：

::change 只会在文本框失去焦点或按下回车时触发。

::input 将在每次按键时触发。

【讨论】：