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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 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
解析dedecms空间迁移步骤详解
2013/05/15 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
python自动点赞功能的实现思路
2020/02/26 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
Python列表推导式实现代码实例
2020/09/09 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
德国足球商店:OUTFITTER
2019/05/06 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
大学应届毕业生个人求职信
2013/09/23 职场文书
化学教师自荐信范文
2013/12/28 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
委托公证书
2014/04/08 职场文书
房地产活动策划方案
2014/05/14 职场文书
购房个人委托书范本
2014/10/11 职场文书
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android