聚合物 1.0:与输入元素的双向绑定

Polymer 1.0: Two-way bindings with input elements

本文关键字：绑定 元素 输入 聚合物      更新时间：2023-09-26

Code

请考虑以下聚合物自定义元素：

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

我在索引中使用此自定义元素.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 属性正确更改，但我的测试元素的 value 属性没有。 我错过了什么？

我还应该指出，调用document.querySelector('test-element').setAttribute('value', 'bar')工作正常。

首先

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

IOW，notify: true意味着使value双向绑定从外部而不是从内部绑定。 reflectToAttribute: true告诉 Polymer 每次更改属性时都要将value写入属性（不利于性能）。

当你执行像 <x-element foo="{{value}}"> 这样的绑定时，它是 x 元素决定foo是否是双向绑定的。

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

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

您需要更改此设置：

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

到

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

试试这里。这说明聚合物可以侦听输入的事件。这里解释（不是很清楚IMO）。

正如 Andrey 和 Scott Miles 所提到的，这两种解决方案都可以与本机 HTML 输入框进行双向绑定。

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

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

有一个重要的区别：

：

：更改仅在文本框失去焦点或按下 Enter 时触发。

：

：输入将在每次按键时触发。

相关文章：