Polymer 1.0：带输入元素的双向绑定
[英]Polymer 1.0: Two-way bindings with input elements
问题描述
码
考虑以下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属性正确更改，但我的test-element的value属性没有。 我错过了什么？
我还应该注意，对document.querySelector('test-element').setAttribute('value', 'bar')的调用正常。
3 个解决方案
解决方案1
29 已采纳 2015-06-14 23:09:46
首先请注意， value属性上的notify和reflectToAttribute字段告诉它如何对它的父节点做出反应，而不是如何绑定到子节点。
IOW， notify: true意味着使value从外部双向绑定，而不是从内部绑定。 reflectToAttribute: true告诉Polymer每次更改时都会向属性写入value （对性能reflectToAttribute: true ）。
当您执行像<x-element foo="{{value}}">这样的绑定时，它的x元素决定了foo是否是双向可绑定的。
像input这样的本机元素没有内置的双向绑定支持，而是使用Polymer的事件 - 观察者语法来双向绑定到输入。 像这样<input value="{{value::change}}"> 。
这告诉Polymer每当input触发change事件时都会从input.value更新this.value 。
解决方案2
16 2015-06-14 23:13:30
解决方案3
0 2017-12-16 23:10:00
正如Andrey和Scott Miles所提到的，这两种解决方案都可以通过本机HTML输入框实现双向绑定。
<input type="text" value="{{value::input}}">
<input type="text" value="{{value::change}}">
有一个重要的区别：
::更改只会在文本框失去焦点或按下输入时触发。
::输入将在每个按键时触发。
聚合物1.0与文本区域的双向绑定
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.