代码

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会返回我在index.html中设置的值，{ {1}}）。有趣的是，输入的"test"属性正确更改，但我的test-element的value属性没有。我错过了什么？

我还应该注意，对value的调用可以正常工作。

Answer 1

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

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

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

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

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

Answer 2

你需要改变这个：

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

到

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

尝试here。这说明聚合物要听取输入的事件。解释here（IMO不太清楚）。

Answer 3

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

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

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

有一个重要的区别：

::更改只会在文本框失去焦点或按下输入时触发。

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

Polymer 1.0：带输入元素

代码

问题

3 个答案: