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

 更新时间:2015年07月29日 11:48:21   投稿:goldensun  
这篇文章主要介绍了JS的框架Polymer中的dom-if和is属性使用说明,Polymer是Google开发的一款JavaScript框架,需要的朋友可以参考下

我们经常会有根据某个属性的取值来觉得模板渲染的需求,那就是最基本的分支语句。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-* 也都是如此定义的。但是这东西细看起来是非常复杂的,而我的文章只是入门级的东西,如果想知道更具体的用法就应该去看源码(连官方文档我也没找到在哪儿定义)。

相关文章

  • 提取字符串中年月日的函数代码

    提取字符串中年月日的函数代码

    提取字符串中年月日的函数代码,需要的朋友可以过来参考下。希望对大家有所帮助
    2013-11-11
  • javascript基础知识

    javascript基础知识

    本文主要介绍javascript一些基础知识,比较实用,希望能给大家做一个参考。
    2016-06-06
  • js arguments对象应用介绍

    js arguments对象应用介绍

    本文将详细介绍js arguments对象的使用方法,需要了解更多的朋友可以参考下
    2012-11-11
  • JavaScript初级教程(第三课)

    JavaScript初级教程(第三课)

    JavaScript初级教程(第三课)...
    2007-04-04
  • 在JavaScript中操作数组之map()方法的使用

    在JavaScript中操作数组之map()方法的使用

    这篇文章主要介绍了在JavaScript中操作数组之map()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • javascript中var的重要性分析

    javascript中var的重要性分析

    这篇文章主要介绍了javascript中var的重要性,实例分析了不使用var声明变量可能会出现的问题,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • Javascript学习指南

    Javascript学习指南

    本文结合自己学习javascript的经验,向大家推荐了循序渐进的学习javascript的自学的轨迹,非常的合理,给有需要的小伙伴们参考下吧。
    2014-12-12
  • JavaScript高级程序设计(第3版)学习笔记9 js函数(下)

    JavaScript高级程序设计(第3版)学习笔记9 js函数(下)

    函数是一种对象,拥有一般对象具有的所有特征,除了函数可以有自己的属性和方法外,还可以做为一个引用类型的值去使用,实际上我们前面的例子中已经有过将函数作为一个对象属性的值,又比如函数也可以作为另一个函数的参数或者返回值,异步处理中的回调函数就是一个典型的用法
    2012-10-10
  • js实现unicode码字符串与utf8字节数据互转详解

    js实现unicode码字符串与utf8字节数据互转详解

    这篇文章主要介绍了js实现unicode码字符串与utf8字节数据互转,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • asm.js使用示例代码

    asm.js使用示例代码

    asm.js是一个底层、格外为 JavaScript 子集优化的编译器。这是 Mozilla 研究项目,类似 Emscripten, Mandreel, 和 LLJS,这个示例让我们简单学习一下asm.js的使用
    2013-11-11

最新评论