详解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 相关文章推荐
nullJavascript中创建对象的五种方法实例
May 07 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
Javascript模块化编程详解
Dec 01 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
vue增删改查的简单操作
Jul 15 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
javascript中call,apply,bind的区别详解
Dec 11 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
用mysql内存表来代替php session的类
2009/02/01 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
javascript object array方法使用详解
2012/12/03 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
shiro授权的实现原理
2017/09/21 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python多进程写入同一文件的方法
2019/01/14 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
django实现类似触发器的功能
2019/11/15 Python
python的等深分箱实例
2019/11/22 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
学雷锋宣传标语
2014/06/25 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
车间统计员岗位职责
2015/04/14 职场文书
大学生见习总结报告
2015/06/24 职场文书
心得体会格式及范文
2016/01/25 职场文书
MySQL 视图(View)原理解析
2021/05/19 MySQL
python编程实现清理微信重复缓存文件
2021/11/01 Python
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python