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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
python 切片和range()用法说明
2013/03/24 Python
Python中的tuple元组详细介绍
2015/02/02 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Python发展简史 Python来历
2019/05/14 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
2014全国两会学习心得体会1000字
2014/03/10 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
信息技术课后反思
2014/04/27 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL
Win10系统下配置Java环境变量
2021/06/13 Java/Android
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python