JS的框架Polymer中的dom-if和is屬性使用說明_基礎知識

我們常常會有根據某個屬性的取值來覺得模板渲染的需求，那就是最基本的分支語句。 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-* 也都是如此定義的。但這東西細看起來是非常複雜的，而我的文章只是入門級的東西，如果想知道更具體的用法就應該去看源碼（連官方文檔我也沒找到在哪裡定義）。