详解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 强制设为首页的代码
Jan 31 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
移动端js触摸事件详解
Sep 18 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 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
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
基于wordpress的ajax写法详解
2018/01/02 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
Python中的默认参数详解
2015/06/24 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python金融数据可视化汇总
2017/11/17 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
python实现中文文本分句的例子
2019/07/15 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
乡镇消防工作实施方案
2014/03/27 职场文书
感恩教育活动总结
2014/05/05 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
《青山不老》教学反思
2016/02/22 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python