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

我們經常會有根據某個屬性的取值來覺得模板渲染的需求，那就是最基本的分支語句。Angular 中有 ng-if 可以用，那么 Polymer 中當然也有 dom-if。其實 dom-if 是個很簡單的東西，它只是作為本篇話題的接入點，我想介紹的實際上是 is 這個屬性。

dom-if 和之前介紹過的 dom-repeat 一樣，都是通過 is 屬性在 tempalte 元素上使用的，比如下面這個例子就是兩個模板根據一個綁定才控件上的布爾值來決定誰該被渲染

運行

1. <script> var Polymer = { dom: 'shadow' }; </script> 
2. <base href="http://www.web-tinker.com/share/" /> 
3. <link rel="import" href="polymer/polymer.html" /> 
4.  
5. <dom-module id="demo-test"> 
6. <template> 
7. <input type="checkbox" checked="{{checked::change}}"> 
8. <template is="dom-if" if="[[checked]]">true</template> 
9. <template is="dom-if" if="[[!checked]]">false</template> 
10. </template> 
11. <script> 
12. Polymer({ 
13. properties: { 
14. checked: { value: false } 
15. }, 
16. is: 'demo-test' 
17. }); 
18. </script> 
19. </dom-module> 
20.  
21. <demo-test></demo-test> 

無論是 dom-if 還是之前的 dom-repeat，這些 is 屬性來指定的到底是什么呢?其實和 Angular 是一樣的，它們都是 Directive 的概念，只是 Polymer 不稱它為 Directive 而已。我們完全可以自己造一個這樣的東西出來，比如下面例子我們給 div 元素添加一個 is="demo-test" 的東西

運行

1. <script> var Polymer = { dom: 'shadow' }; </script> 
2. <base href="http://www.web-tinker.com/share/" /> 
3. <link rel="import" href="polymer/polymer.html" /> 
4.  
5. <script> 
6. Polymer({ 
7. is: 'demo-test', 
8. extends: 'div', <!-- 關鍵就在這里 
9. ready: function(e) { 
10. this.innerHTML = '我是一個 demo-test'; 
11. } 
12. }); 
13. </script> 
14.  
15. <div is="demo-test"></div> 

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