本文深入解析Polymer框架中的数据绑定机制，重点阐述通过notify属性定义访问器属性以触发通知事件的原理。文章说明了如何配置属性以生成特定的事件名称，并利用listeners机制捕获这些事件。此外，还介绍了模板中使用双冒号语法实现双向同步的方法，以及style$属性绑定的特殊语法规则，帮助开发者理解Polymer中数据与视图交互的核心逻辑。
Polymer属性定义与访问器机制
Polymer 框架通过访问器属性的形式来定义那些具有监听需求的属性，而未添加监听需求的属性则保持普通属性的定义方式。在模板中，还可以利用「::」语法将属性与目标元素的特定事件进行双向同步，这种机制类似于 Angular 中的双向绑定概念，但 Polymer 的实现更为纯粹且更贴近底层原理。在 properties 配置中，若定义的属性未添加 notify 选项且未在模板中使用，则该属性被视为无监听需求的普通属性；反之，所有其他属性均会被定义为访问器属性。以下示例代码展示了这一区别：
<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />
<dom-module id="demo-test">
<template>
<h1>[[z]]</h1>
</template>
<script>
Polymer({
is: 'demo-test',
properties: {
x: { value: 'x' },
y: { value: 'y', notify: true }
},
ready: function() {
console.log(Object.getOwnPropertyDescriptor(this, 'x'));
console.log(Object.getOwnPropertyDescriptor(this.__proto__, 'y'));
console.log(Object.getOwnPropertyDescriptor(this.__proto__, 'z'));
}
});
</script>
</dom-module>
<demo-test></demo-test>
notify通知事件与监听配置
当属性在配置中设置 notify 为 true 时，该属性值发生变化会触发一个名为「属性名-changed」的事件。需要注意的是，属性名与 changed 之间使用横杠连接，且 changed 采用过去时态，而非 change 原形。Polymer 允许使用 listeners 来添加事件监听，但监听器不能直接绑定到函数上，而必须绑定到某个属性名上（这种设计的具体原因尚不明确）。
<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />
<dom-module id="demo-test">
<template>
<h1>[[i]]</h1>
</template>
<script>
Polymer({
is: 'demo-test',
properties: {
i: { value: 0, notify: true }
},
ready: function() {
setInterval(function(that) {
that.i++;
}, 100, this);
},
listeners: {
'i-changed': 'iChangeHandler'
},
iChangeHandler: function(event) {
console.log(event.detail.value);
}
});
</script>
</dom-module>
<demo-test></demo-test>
模板中的事件捕获与双向同步
在模板中，可以使用「::」语法来捕获上述产生的通知事件，以及用户主动触发的交互事件。这种语法使得事件处理更加直观和便捷。
<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" /
<dom-module id="demo-test">
<template>
<input value="{{text::input}}" /><hr/>
<textarea value="{{css::input}}"></textarea><hr/>
<h1 style$="[[css]]">[[text]]</h1>
</template>
<script>
Polymer({ is: 'demo-test' });
</script>
</dom-module>
<demo-test></demo-test>
属性绑定的特殊语法说明
需要注意的是，示例中使用的是 style$="[css]" 而不是直接的 style="css"。这是因为此处是将值赋给元素的 attribute 属性，而非纯粹的 property 赋值。因此，在等号前需要添加一个「$」符号（这种语法看起来可能略显奇怪）。以上便是 Polymer 框架中关于数据绑定的主要内容。可能还有其他细节未被涵盖，后续文章可能会进行补充。