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

时间:2020-05-14 人气:0

我们经常会有根据某个属性的取值来觉得模板渲染的需求，那就是最基本的分支语句。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>
<https://img.qb5200.com/download-x/dom-module>

<demo-test><https://img.qb5200.com/download-x/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-* 也都是如此定义的。但是这东西细看起来是非常复杂的，而我的文章只是入门级的东西，如果想知道更具体的用法就应该去看源码（连官方文档我也没找到在哪儿定义）。

加载全部内容