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 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
js控制input输入字符解析
2013/12/27 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python re模块介绍
2014/11/30 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
实习鉴定范文
2013/12/19 职场文书
计算机专业优秀大学生自我总结
2014/01/21 职场文书
努力学习演讲稿
2014/05/10 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang