javascript Polymer 1.0：输入元素的双向绑定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30835341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Polymer 1.0: Two-way bindings with input elements
提问by Andre Gregori
Code
代码
Consider the following Polymer custom element:
考虑以下 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>
I use this custom element in my index.html as follows:
我在 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
问题
I believe I have declared the valueproperty as a two-way binding (notify: true); yet when I click on the input and type in some text (say, "foo"), it is not reflected in the model (i.e. a call to document.querySelector('test-element').valuereturns the value I set in index.html, "test"). Interestingly enough, the valueattribute of the input changes correctly, but the value property of my test-element does not. What am I missing?
我相信我已将该value属性声明为双向绑定 ( notify: true)；然而，当我点击输入并输入一些文本（比如，"foo"）时，它没有反映在模型中（即调用document.querySelector('test-element').value返回我在 index.html 中设置的值"test"）。有趣的是，value输入的属性正确更改，但我的测试元素的 value 属性没有。我错过了什么？
I should also note that a call to document.querySelector('test-element').setAttribute('value', 'bar')works properly.
我还应该注意，调用 todocument.querySelector('test-element').setAttribute('value', 'bar')工作正常。
回答by Scott Miles
First note that the notifyand reflectToAttributefields on the valueproperty tell it how to react to it's parent not about how to bind to a child.
首先请注意，属性上的notify和reflectToAttribute字段value告诉它如何对其父级做出反应，而不是关于如何绑定到子级。
IOW, notify: truemeans to make valuetwo-way bindable from the outside, not from the inside. reflectToAttribute: truetells Polymer to write valueto an attribute every time it changes (not good for performance).
IOW，notify: true意思是使value双向可从外部绑定，而不是从内部绑定。reflectToAttribute: true告诉 Polymervalue每次更改时写入属性（不利于性能）。
When you do a binding like <x-element foo="{{value}}">, it's x-elementthat decides if foois two-way bindable.
当您进行类似的绑定时<x-element foo="{{value}}">，由x 元素决定是否foo可双向绑定。
Native elements like inputdo not have two-way binding support built in, instead use Polymer's event-observer syntax to two-way bind to an input. Like so
<input value="{{value::change}}">.
本机元素input没有内置的双向绑定支持，而是使用 Polymer 的事件观察器语法来双向绑定到输入。像这样
<input value="{{value::change}}">。
This tells Polymer to update this.valuefrom input.valuewhenever the inputfires a changeevent.
这告诉 Polymerthis.value从input.value何时input触发change事件开始更新。
回答by Andrey
回答by Steven Spungin
As mentioned by Andrey and Scott Miles, both of these solutions will work to get 2-way-bind with a native HTML input box.
正如 Andrey 和 Scott Miles 所提到的，这两种解决方案都可以与原生 HTML 输入框进行双向绑定。
<input type="text" value="{{value::input}}">
<input type="text" value="{{value::input}}">
<input type="text" value="{{value::change}}">
<input type="text" value="{{value::change}}">
With an important difference:
有一个重要的区别：
::change will only fire when the text box loses focus or enter is pressed.
::change 只会在文本框失去焦点或按下 Enter 时触发。
::input will fire on every keypress.
::input 将在每次按键时触发。
