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 相关文章推荐
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
Javascript之String对象详解
Jun 08 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
layer弹出层取消遮罩的方法
Sep 25 Javascript
JavaScript快速调试的两个技巧
Nov 04 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
JS分页效果示例
2013/10/11 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
js实现下一页页码效果
2017/03/07 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
python实现弹跳小球
2019/05/13 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
Python flask框架端口失效解决方案
2020/06/04 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
学生出入校管理制度
2014/01/16 职场文书
学校安全工作制度
2014/01/19 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
MySQL读取JSON转换的方式
2022/03/18 MySQL