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


Posted in Javascript onJuly 29, 2015

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

Javascript 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
vuex存储token示例
Nov 11 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 #Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 #Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 #Javascript
js数组去重的方法汇总
Jul 29 #Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 #Javascript
JavaScript中的cacheStorage使用详解
Jul 29 #Javascript
JavaScript中数组继承的简单示例
Jul 29 #Javascript
You might like
PHP.MVC的模板标签系统(三)
2006/09/05 PHP
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
浅析Python迭代器的高级用法
2020/07/16 Python
用Python进行websocket接口测试
2020/10/16 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
python常量折叠基础知识点讲解
2021/02/28 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
置业顾问岗位职责
2014/03/02 职场文书
幼教求职信
2014/03/12 职场文书
代理协议书
2014/04/22 职场文书
在校实习生求职信
2014/06/18 职场文书
小学生成绩单评语
2014/12/31 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers