详解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 相关文章推荐
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
JavaScript入门基础
Aug 12 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
vue实现表格增删改查效果的实例代码
Jul 18 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
禁止你的左键复制实用技巧
2013/01/04 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
在Django框架中设置语言偏好的教程
2015/07/27 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
python安装及变量名介绍详解
2020/12/12 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
机电专业大学生职业规划书范文
2014/02/25 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
欢迎领导标语
2014/06/27 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
面试自我评价范文
2014/09/17 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
研讨会通知
2015/04/27 职场文书
政工师工作总结2015
2015/05/26 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
python四种出行路线规划的实现
2021/06/23 Python
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL
如何使用SQL Server语句创建表
2022/04/12 SQL Server