JS的框架Polymer中的dom-if和is属性使用说明


Posted in Javascript onJuly 29, 2015

我们经常会有根据某个属性的取值来觉得模板渲染的需求,那就是最基本的分支语句。Angular 中有 ng-if 可以用,那么 Polymer 中当然也有 dom-if。其实 dom-if 是个很简单的东西,它只是作为本篇话题的接入点,我想介绍的实际上是 is 这个属性。

dom-if 和之前介绍过的 dom-repeat 一样,都是通过 is 属性在 tempalte 元素上使用的,比如下面这个例子就是两个模板根据一个绑定才控件上的布尔值来决定谁该被渲染
运行

<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 type="checkbox" checked="{{checked::change}}">
  <template is="dom-if" if="[[checked]]">true</template>
  <template is="dom-if" if="[[!checked]]">false</template>
 </template>
 <script>
  Polymer({
   properties: {
    checked: { value: false }
   },
   is: 'demo-test'
  });
 </script>
</dom-module>

<demo-test></demo-test>

无论是 dom-if 还是之前的 dom-repeat,这些 is 属性来指定的到底是什么呢?其实和 Angular 是一样的,它们都是 Directive 的概念,只是 Polymer 不称它为 Directive 而已。我们完全可以自己造一个这样的东西出来,比如下面例子我们给 div 元素添加一个 is="demo-test" 的东西
运行

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<script>
 Polymer({
  is: 'demo-test',
  extends: 'div', <!-- 关键就在这里
  ready: function(e) {
   this.innerHTML = '我是一个 demo-test';
  }
 });
</script>

<div is="demo-test"></div>

在定义时通过 extends 指定一个标签名即可得到一个 is 指令。上面例子是一个最简单的用法,我们可以自己创建 Shadow DOM 做自己想做的事了。实际上 Polymer 内置的 dom-repeat 和 dom-if 以及其他 dom-* 也都是如此定义的。但是这东西细看起来是非常复杂的,而我的文章只是入门级的东西,如果想知道更具体的用法就应该去看源码(连官方文档我也没找到在哪儿定义)。

Javascript 相关文章推荐
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
javascript实现日历效果
Jun 17 Javascript
详解React的回调渲染模式
Sep 10 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
js数组去重的方法汇总
Jul 29 #Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 #Javascript
JavaScript中的cacheStorage使用详解
Jul 29 #Javascript
JavaScript中数组继承的简单示例
Jul 29 #Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 #Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 #Javascript
浅谈Javascript数组的使用
Jul 29 #Javascript
You might like
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
python自动化测试之连接几组测试包实例
2014/09/28 Python
初步探究Python程序的执行原理
2015/04/11 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
python实现图片插入文字
2019/11/26 Python
python扫描线填充算法详解
2020/02/19 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
大学生个人简历自我评价
2013/11/16 职场文书
中学生校园广播稿
2014/01/16 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
英文邀请函
2015/02/02 职场文书
特种设备安全管理制度
2015/08/06 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
Go中的条件语句Switch示例详解
2021/08/23 Golang
sql server 累计求和实现代码
2022/02/28 SQL Server
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL