Polymer 1.0:带输入元素的双向绑定

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Polymer 1.0:带输入元素的双向绑定相关的知识,希望对你有一定的参考价值。

Code

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

Question

我相信我已经宣布value财产是一种双向约束(notify: true);然而,当我点击输入并键入一些文本(例如,"foo")时,它没有反映在模型中(即调用document.querySelector('test-element').value返回我在index.html,"test"中设置的值)。有趣的是,输入的value属性正确更改,但我的test-element的value属性没有。我错过了什么?

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

答案

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

IOW,notify: true意味着使value从外部双向绑定,而不是从内部绑定。 reflectToAttribute: true告诉Polymer每次更改时都会将value写入属性(对性能不利)。

当你像<x-element foo="{{value}}">那样进行绑定时,它的x元素决定了foo是否是双向可绑定的。

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

这告诉Polymer每当this.value发射input.value事件时都会从input更新change

另一答案

你需要改变这个:

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

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

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

另一答案

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

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

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

有一个重要的区别:

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

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

以上是关于Polymer 1.0:带输入元素的双向绑定的主要内容,如果未能解决你的问题,请参考以下文章

Polymer 1.0 输入有效性观察者

Polymer 1.0 通配符绑定到数组中的嵌套子属性

Angular Dart 和 Polymer Dart 的区别

3分钟带你搞懂Vue双向绑定原理及问题剖析

3分钟带你搞懂Vue双向绑定原理及问题剖析

输入复选框元素的双向数据绑定