13

代码

考虑以下 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输入的属性正确更改，但我的测试元素的 value 属性没有。我错过了什么？

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

4

3 回答 3

29

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

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

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

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

这告诉 Polymer在触发事件时进行更新this.value。input.valueinputchange

于 2015-06-14T23:09:46.150 回答
16

你需要改变这个：

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

进入

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

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

于 2015-06-14T23:13:30.210 回答
0

正如 Andrey 和 Scott Miles 所提到的，这两种解决方案都可以使用原生 HTML 输入框实现 2-way-bind。

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

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

有一个重要区别：

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

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

于 2017-12-16T23:10:00.987 回答