And*_*ori 13 javascript 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>
我在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')正常工作的电话.
Sco*_*les 29
首先请注意,属性上的notify和reflectToAttribute字段value告诉它如何对它的父级做出反应而不是如何绑定到子节点.
IOW,notify: true意思是value从外部进行双向绑定,而不是从内部进行绑定.reflectToAttribute: true告诉Polymer value每次更改时写入一个属性(不利于性能).
当你执行绑定时<x-element foo="{{value}}">,它的x元素决定了是否foo是双向可绑定的.
本机元素input不具有内置的双向绑定支持,而是使用Polymer的事件 - 观察者语法双向绑定到输入.像这样
<input value="{{value::change}}">.
这告诉高分子更新this.value来自input.value每当input火灾一change事件.
And*_*rey 16
你需要改变这个:
<input type="text" value="{{value}}">
成
<input type="text" value="{{value::input}}">
试试这里.这说明聚合物要听取输入的事件.这里解释(IMO不是很清楚).
| 归档时间： |
|
| 查看次数： |
11752 次 |
| 最近记录： |