這篇文章主要介紹了JavaScript的Polymer框架中dom-repeat與VM的相關(guān)操作,Polymer是由Ggoogle開發(fā)的Web UI相關(guān)框架,需要的朋友可以參考下

各種框架都有把一個(gè)列表數(shù)據(jù)綁定到 DOM 上的功能，比如 Angular 會(huì)用 ng-repeat 來(lái)綁定。那么 Polymer 呢?其實(shí)這個(gè)級(jí)別的功能屬于框架的擴(kuò)展功能了，Angular 的 ng-repeat 也只是個(gè) Directive 而已。Polymer 的 dom-repeat 也是這個(gè)級(jí)別的東西。

在 Polymer 中，一切都是 Directive 的概念。dom-module 用于定義模塊，它本身也是一個(gè) Directive。dom-repeat 也是，但它不是一個(gè)標(biāo)簽，而是一個(gè)基于 template 標(biāo)簽的 Directive。我們可以這樣使用它：

運(yùn)行

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. <ul> 
8. <template is="dom-repeat" items="[[data]]"> 
9. <li> 
10. 第 <strong>[[index]]</strong> 項(xiàng)， 
11. 值為 <strong>[[item]]</strong> 
12. </li> 
13. </template> 
14. </ul> 
15. </template> 
16. <script> 
17. Polymer({ 
18. is: 'demo-test', 
19. properties: { 
20. data: { 
21. type: Array, 
22. value: [ 'a', 'b', 'c', 'd' ] 
23. } 
24. } 
25. }); 
26. </script> 
27. </dom-module> 
28.  
29. <demo-test></demo-test> 

上面的代碼對(duì)某個(gè) template 元素設(shè)置 is 屬性為 dom-repeat，于是這個(gè) template 元素內(nèi)的東西就被循環(huán)了。這個(gè)循環(huán)根據(jù)在 template 元素上提供的 items 屬性來(lái)遍歷。注意 items 必須是數(shù)組，雖然用起來(lái)可能有點(diǎn)不太方便，但我覺得這個(gè)限制是一個(gè)非常好的做法。避免了像 Angular 那樣使用 for-in 去遍歷導(dǎo)致的各種問(wèn)題。

items 的每一項(xiàng)，其索引和值會(huì)被放入 index 和 item 這兩個(gè)屬性中供 template 內(nèi)的模板使用，于是上面的例子就輸出了給定的索引和值。

然而 Polymer 的數(shù)據(jù)更新并不是基于臟數(shù)據(jù)比對(duì)，所以數(shù)據(jù)的動(dòng)態(tài)更新可能就有點(diǎn)麻煩。比如我們有一個(gè)按鈕，每次點(diǎn)擊要增加一項(xiàng)的話應(yīng)該這么寫

運(yùn)行

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 placeholder="請(qǐng)輸入內(nèi)容" value="{{value::input}}" /> 
8. <button on-click="append">添加一項(xiàng)</button> 
9. <ul> 
10. <template is="dom-repeat" items="[[data]]"> 
11. <li> 
12. 第 <strong>[[index]]</strong> 項(xiàng)， 
13. 值為 <strong>[[item]]</strong> 
14. </li> 
15. </template> 
16. </ul> 
17. </template> 
18. <script> 
19. Polymer({ 
20. is: 'demo-test', 
21. properties: { 
22. data: { 
23. type: Array, 
24. value: [ 'a', 'b', 'c', 'd' ] 
25. } 
26. }, 
27. append: function() { 
28. // data.push(this.value); // 這么寫是不行的 
29. this.push('data', this.value) 
30. } 
31. }); 
32. </script> 
33. </dom-module> 
34.  
35. <demo-test></demo-test> 

之前我們說(shuō)過(guò)，Polymer 會(huì)將需要監(jiān)控變化的數(shù)據(jù)作為一個(gè)訪問(wèn)器屬性來(lái)設(shè)置，但如果改變數(shù)組的元素，實(shí)際上并沒(méi)有對(duì)數(shù)組本身有任何改動(dòng)。當(dāng)我們把一個(gè)數(shù)組賦值給 VM 時(shí)實(shí)際上是把元素復(fù)制過(guò)去，而不是把數(shù)組對(duì)象丟過(guò)去。也就是說(shuō)，這個(gè)數(shù)組對(duì)象并不直接是 VM 的引用，操作這個(gè)數(shù)組對(duì)象是無(wú)法影響 VM 的，所以直接對(duì)數(shù)組做 push 只是對(duì)數(shù)據(jù)的 push。

雖然數(shù)組自己的 push 方法無(wú)法操作 VM，但 Polymer 自己也提供了一些直接操作 VM 的方法，比如上面例子中的 this.push 就是 Polymer 提供的。它的操作模板不是一個(gè)對(duì)象，而是 VM 上的一個(gè)訪問(wèn)路徑(比如上面例子中 push 的第一個(gè)參數(shù) 'data' 就是 VM 中 data 訪問(wèn)路徑)。

除了 push 之外還有 pop、shift 等一些類似原生方法的操作(但要注意他們不是元素方法)。雖然操作起來(lái)確實(shí)不太方便，但也不至于到惡心的程度，反正我是勉強(qiáng)能接受的。