码
考虑以下聚合物自定义元素:
<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属性声明为双向绑定(bind)(notify: true)；但是，当我单击输入并键入一些文本(例如"foo")时，它不会反射(reflect)在模型中(即，对document.querySelector('test-element').value的调用将返回我在index.html中设置的值"test")。有趣的是，输入的value属性正确更改，但是我的测试元素的value属性没有更改。我想念什么？我还应该注意，对
document.querySelector('test-element').setAttribute('value', 'bar')的调用可以正常工作。 最佳答案
首先请注意notify属性上的reflectToAttribute和value字段告诉它如何对父对象使用react，而不是如何绑定(bind)到子对象。
IOW，notify: true意味着使value从外部(而不是从内部)双向绑定(bind)。 reflectToAttribute: true告诉Polymer每次更改属性时都要将value写入属性(不利于性能)。
当您像<x-element foo="{{value}}">这样进行绑定(bind)时，由x元素决定foo是否可双向绑定(bind)。
诸如input之类的本机元素没有内置的双向绑定(bind)支持，而是使用Polymer的event-observer语法对输入进行双向绑定(bind)。像这样<input value="{{value::change}}">。
这告诉Polymer每当this.value触发input.value事件时就从input更新change。
关于javascript - polymer 1.0:带有输入元素的双向绑定(bind)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30835341/