快捷導(dǎo)航

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

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

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

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

<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>

　　無(wú)論是 dom-if 還是之前的 dom-repeat，這些 is 屬性來(lái)指定的到底是什么呢？其實(shí)和 Angular 是一樣的，它們都是 Directive 的概念，只是 Polymer 不稱(chēng)它為 Directive 而已。我們完全可以自己造一個(gè)這樣的東西出來(lái)，比如下面例子我們給 div 元素添加一個(gè) is="demo-test" 的東西
運(yùn)行

<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 = '我是一個(gè) demo-test';
  }
 });
</script>

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

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

您可能感興趣的文章: