详解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对象所有属性和方法的函数
Oct 16 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
微信小程序实现时间戳格式转换
Jul 20 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的ob_start();控制您的浏览器cache!
2007/02/14 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
python实现图片批量压缩程序
2018/07/23 Python
Python使用python-docx读写word文档
2019/08/26 Python
实习鉴定评语
2014/01/19 职场文书
一份创业计划书范文
2014/02/08 职场文书
2014年三万活动总结
2014/04/26 职场文书
保护环境倡议书100字
2014/05/19 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
浅谈redis整数集为什么不能降级
2021/07/25 Redis
AJAX实现省市县三级联动效果
2021/10/16 Javascript