JS的框架Polymer中的dom-if和is属性使用说明
我们经常会有根据某个属性的取值来觉得模板渲染的需求，那就是最基本的分支语句。Angular中有ng-if可以用，那么Polymer中当然也有dom-if。其实dom-if是个很简单的东西，它只是作为本篇话题的接入点，我想介绍的实际上是is这个属性。
dom-if和之前介绍过的dom-repeat一样，都是通过is属性在tempalte元素上使用的，比如下面这个例子就是两个模板根据一个绑定才控件上的布尔值来决定谁该被渲染
运行
<script>varPolymer={dom:'shadow'};</script>
<basehref="http://www.web-tinker.com/share/"/>
<linkrel="import"href="polymer/polymer.html"/>
<dom-moduleid="demo-test">
<template>
<inputtype="checkbox"checked="{{checked::change}}">
<templateis="dom-if"if="[[checked]]">true</template>
<templateis="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>varPolymer={dom:'shadow'};</script>
<basehref="http://www.web-tinker.com/share/"/>
<linkrel="import"href="polymer/polymer.html"/>
<script>
Polymer({
is:'demo-test',
extends:'div',<!--关键就在这里
ready:function(e){
this.innerHTML='我是一个demo-test';
}
});
</script>
<divis="demo-test"></div>
在定义时通过extends指定一个标签名即可得到一个is指令。上面例子是一个最简单的用法，我们可以自己创建ShadowDOM做自己想做的事了。实际上Polymer内置的dom-repeat和dom-if以及其他dom-*也都是如此定义的。但是这东西细看起来是非常复杂的，而我的文章只是入门级的东西，如果想知道更具体的用法就应该去看源码（连官方文档我也没找到在哪儿定义）。