无为清净楼资源网

JavaScript的Polymer框架中dom-repeat与VM的相关操作
网络编程 2024/11/20 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

各种框架都有把一个列表数据绑定到 DOM 上的功能，比如 Angular 会用 ng-repeat 来绑定。那么 Polymer 呢？其实这个级别的功能属于框架的扩展功能了，Angular 的 ng-repeat 也只是个 Directive 而已。Polymer 的 dom-repeat 也是这个级别的东西。
　　在 Polymer 中，一切都是 Directive 的概念。dom-module 用于定义模块，它本身也是一个 Directive。dom-repeat 也是，但它不是一个标签，而是一个基于 template 标签的 Directive。我们可以这样使用它：
运行

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <ul>
   <template is="dom-repeat" items="[[data]]">
    <li>
     第 <strong>[[index]]</strong> 项，
     值为 <strong>[[item]]</strong>
    </li>
   </template>
  </ul>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   properties: {
    data: {
     type: Array,
     value: [ 'a', 'b', 'c', 'd' ]
    }
   }
  });
 </script>
</dom-module>

<demo-test></demo-test>

　　上面的代码对某个 template 元素设置 is 属性为 dom-repeat，于是这个 template 元素内的东西就被循环了。这个循环根据在 template 元素上提供的 items 属性来遍历。注意 items 必须是数组，虽然用起来可能有点不太方便，但我觉得这个限制是一个非常好的做法。避免了像 Angular 那样使用 for-in 去遍历导致的各种问题。
　　items 的每一项，其索引和值会被放入 index 和 item 这两个属性中供 template 内的模板使用，于是上面的例子就输出了给定的索引和值。
　　然而 Polymer 的数据更新并不是基于脏数据比对，所以数据的动态更新可能就有点麻烦。比如我们有一个按钮，每次点击要增加一项的话应该这么写
运行

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <input placeholder="请输入内容" value="{{value::input}}" />
  <button on-click="append">添加一项</button>
  <ul>
   <template is="dom-repeat" items="[[data]]">
    <li>
     第 <strong>[[index]]</strong> 项，
     值为 <strong>[[item]]</strong>
    </li>
   </template>
  </ul>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   properties: {
    data: {
     type: Array,
     value: [ 'a', 'b', 'c', 'd' ]
    }
   },
   append: function() {
    // data.push(this.value); // 这么写是不行的
    this.push('data', this.value)
   }
  });
 </script>
</dom-module>

<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 等一些类似原生方法的操作（但要注意他们不是元素方法）。虽然操作起来确实不太方便，但也不至于到恶心的程度，反正我是勉强能接受的。

标签：
Polymer,dom-repeat,VM
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接