JavaScript的Polymer框架中dom-repeat与VM的相关操作

这篇文章主要介绍了JavaScript的Polymer框架中dom-repeat与VM的相关操作,Polymer是由Ggoogle开发的Web UI相关框架,需要的朋友可以参考下

各种框架都有把一个列表数据绑定到 DOM 上的功能，比如 Angular 会用 ng-repeat 来绑定。那么 Polymer 呢?其实这个级别的功能属于框架的扩展功能了，Angular 的 ng-repeat 也只是个 Directive 而已。Polymer 的 dom-repeat 也是这个级别的东西。

在 Polymer 中，一切都是 Directive 的概念。dom-module 用于定义模块，它本身也是一个 Directive。dom-repeat 也是，但它不是一个标签，而是一个基于 template 标签的 Directive。我们可以这样使用它：

运行

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

上面的代码对某个 template 元素设置 is 属性为 dom-repeat，于是这个 template 元素内的东西就被循环了。这个循环根据在 template 元素上提供的 items 属性来遍历。注意 items 必须是数组，虽然用起来可能有点不太方便，但我觉得这个限制是一个非常好的做法。避免了像 Angular 那样使用 for-in 去遍历导致的各种问题。

items 的每一项，其索引和值会被放入 index 和 item 这两个属性中供 template 内的模板使用，于是上面的例子就输出了给定的索引和值。

然而 Polymer 的数据更新并不是基于脏数据比对，所以数据的动态更新可能就有点麻烦。比如我们有一个按钮，每次点击要增加一项的话应该这么写

运行

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="请输入内容" value="{{value::input}}" /> 
8. <button on-click="append">添加一项</button> 
9. <ul> 
10. <template is="dom-repeat" items="[[data]]"> 
11. <li> 
12. 第 <strong>[[index]]</strong> 项， 
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> 

之前我们说过，Polymer 会将需要监控变化的数据作为一个访问器属性来设置，但如果改变数组的元素，实际上并没有对数组本身有任何改动。当我们把一个数组赋值给 VM 时实际上是把元素复制过去，而不是把数组对象丢过去。也就是说，这个数组对象并不直接是 VM 的引用，操作这个数组对象是无法影响 VM 的，所以直接对数组做 push 只是对数据的 push。

虽然数组自己的 push 方法无法操作 VM，但 Polymer 自己也提供了一些直接操作 VM 的方法，比如上面例子中的 this.push 就是 Polymer 提供的。它的操作模板不是一个对象，而是 VM 上的一个访问路径(比如上面例子中 push 的第一个参数 'data' 就是 VM 中 data 访问路径)。

除了 push 之外还有 pop、shift 等一些类似原生方法的操作(但要注意他们不是元素方法)。虽然操作起来确实不太方便，但也不至于到恶心的程度，反正我是勉强能接受的。