详解JavaScript的Polymer框架中的通知交互
Polymer 以访问器属性的形式来定义有监听需求的属性（没有监听需求的属性依然是普通的属性形式定义）。模板中还可以采用「::」语法来将属性双向同步于目标元素的某个事件，这就是 Angular 中双向绑定的概念，甚至还要比它更纯粹、更贴近原理。
在 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 为 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 中所有关于数据绑定的内容了。也许有遗漏，可能会在其它文章中补充。
相关文章
jQuery中文入门指南，翻译加实例，jQuery的起点教程
jQuery中文入门指南，翻译加实例，jQuery的起点教程...2007-01-01
我们不论用什么程序，经常会用到的js代码，建议大家收藏好，方便以后使用2008-06-06
这篇文章主要介绍了在Python中使用glob模块查找文件路径的方法,使用模块其中的iglob方法实现起来非常简单,需要的朋友可以参考下2015-06-06
javascript学习笔记之节点的操作实现代码，包括节点的创建、添加、移除、替换、复制2012-06-06
JavaScript中用toString()方法返回时间为字符串
这篇文章主要介绍了JavaScript中用toString()方法返回时间为字符串的方法,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
这篇文章介绍了ES6中函数的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
JavaScript中Number.MIN_VALUE属性的使用示例
这篇文章主要介绍了JavaScript中Number.MIN_VALUE属性的使用示例,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了如何让es6 写的文件import 起来详解的相关资料,需要的朋友可以参考下2016-12-12
浅谈JavaScript中的apply/call/bind和this的使用
apply/call/bind三者的联系就在于，都可以用来改变函数中 this 指向的值，且第一个参数为要指向的 this 的值，apply的第二个参数（或 bind 与 call 的不定参数）为要传入的参数。这就不得不提及 javascript 中函数的 this 的指向了。下面我们来简单探讨下2017-02-02
JavaScript高级程序设计（第3版）学习笔记6 初识js对象
砌好墙，下面出场的就是房子了，在ECMAScript中，对象就是我们所说的房子，至于你所写的整个应用程序，那就是一整套建筑群了2012-10-10
最新评论