详解JavaScript的Polymer框架中的通知交互


Posted in Javascript onJuly 29, 2015

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>

详解JavaScript的Polymer框架中的通知交互

 注意上面是 style$="[css]" 而不是直接的 style="css",因为此处是赋值给元素的 attribute 上,而不是纯粹的 property 赋值。所以在等号前面加一个「$」(其实我觉得这个语法看起来非常奇怪)。

以上这些就是我所知道的 Polymer 中所有关于数据绑定的内容了。也许有遗漏,可能会在其它文章中补充。

Javascript 相关文章推荐
Javascript 面向对象之重载
May 04 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 #Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 #Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 #Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 #Javascript
js数组去重的方法汇总
Jul 29 #Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 #Javascript
JavaScript中的cacheStorage使用详解
Jul 29 #Javascript
You might like
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
php格式化json函数示例代码
2016/05/12 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
Javascript验证方法大全
2015/09/21 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
目前最全的python的就业方向
2018/06/05 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
python def 定义函数,调用函数方式
2020/06/02 Python
二年级小学生评语
2014/04/21 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
初中运动会前导词
2015/07/20 职场文书