欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-10-24 15:46:41
各种框架都有把一个列表数据绑定到 dom 上的功能,比如 angular 会用 ng-repeat 来绑定。那么 polymer 呢?其实这个级别的功能属于框架的扩展功能了...

各种框架都有把一个列表数据绑定到 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 等一些类似原生方法的操作(但要注意他们不是元素方法)。虽然操作起来确实不太方便,但也不至于到恶心的程度,反正我是勉强能接受的。