视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript的Polymer框架中dom-repeat与VM的相关操作_基础知识
2020-11-27 21:41:12 责编:小采
文档


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

 var Polymer = { dom: 'shadow' }; 




 
 

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

 var Polymer = { dom: 'shadow' }; 




 
 

  之前我们说过,Polymer 会将需要监控变化的数据作为一个访问器属性来设置,但如果改变数组的元素,实际上并没有对数组本身有任何改动。当我们把一个数组赋值给 VM 时实际上是把元素复制过去,而不是把数组对象丢过去。也就是说,这个数组对象并不直接是 VM 的引用,操作这个数组对象是无法影响 VM 的,所以直接对数组做 push 只是对数据的 push。
  虽然数组自己的 push 方法无法操作 VM,但 Polymer 自己也提供了一些直接操作 VM 的方法,比如上面例子中的 this.push 就是 Polymer 提供的。它的操作模板不是一个对象,而是 VM 上的一个访问路径(比如上面例子中 push 的第一个参数 'data' 就是 VM 中 data 访问路径)。
  除了 push 之外还有 pop、shift 等一些类似原生方法的操作(但要注意他们不是元素方法)。虽然操作起来确实不太方便,但也不至于到恶心的程度,反正我是勉强能接受的。

下载本文
显示全文
专题