快捷導航

JS的框架Polymer中的dom-if和is屬性使用說明

更新時間：2015年07月29日 11:48:21 投稿：goldensun

這篇文章主要介紹了JS的框架Polymer中的dom-if和is屬性使用說明,Polymer是Google開發(fā)的一款JavaScript框架,需要的朋友可以參考下

我們經(jīng)常會有根據(jù)某個屬性的取值來覺得模板渲染的需求，那就是最基本的分支語句。Angular 中有 ng-if 可以用，那么 Polymer 中當然也有 dom-if。其實 dom-if 是個很簡單的東西，它只是作為本篇話題的接入點，我想介紹的實際上是 is 這個屬性。
　　dom-if 和之前介紹過的 dom-repeat 一樣，都是通過 is 屬性在 tempalte 元素上使用的，比如下面這個例子就是兩個模板根據(jù)一個綁定才控件上的布爾值來決定誰該被渲染
運行

<script> var Polymer = { dom: 'shadow' }; </script>
<base  />
<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  />
<link rel="import" href="polymer/polymer.html" />

<script>
 Polymer({
  is: 'demo-test',
  extends: 'div', <!-- 關(guān)鍵就在這里
  ready: function(e) {
   this.innerHTML = '我是一個 demo-test';
  }
 });
</script>

<div is="demo-test"></div>

　　在定義時通過 extends 指定一個標簽名即可得到一個 is 指令。上面例子是一個最簡單的用法，我們可以自己創(chuàng)建 Shadow DOM 做自己想做的事了。實際上 Polymer 內(nèi)置的 dom-repeat 和 dom-if 以及其他 dom-* 也都是如此定義的。但是這東西細看起來是非常復雜的，而我的文章只是入門級的東西，如果想知道更具體的用法就應(yīng)該去看源碼（連官方文檔我也沒找到在哪兒定義）。

您可能感興趣的文章: