Polymer 1.0：与输入元素的双向绑定

Question

代码

考虑以下 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 returns 我在 index.html, "test").有趣的是，输入的 value 属性正确更改，但我的测试元素的值属性没有。我错过了什么？

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

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

Answer 2

你需要改变这个：

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

进入

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

尝试here. This says for polymer to listen to input's events. Explained here（IMO 不是很清楚）。

Answer 3

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

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

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

有一个重要的区别：

::change 仅在文本框失去焦点或按下 enter 时触发。

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

Polymer 1.0：与输入元素的双向绑定

Polymer 1.0: Two-way bindings with input elements

javascript

polymer

custom-element

代码

问题