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框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
Element InputNumber 计数器的实现示例
Aug 03 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 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
重置版宣传动画
2020/04/09 魔兽争霸
apache中为php 设置虚拟目录
2014/12/17 PHP
php银联网页支付实现方法
2015/03/04 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
numpy中矩阵合并的实例
2018/06/15 Python
python实现梯度下降算法
2020/03/24 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
爱普生美国官网:Epson美国
2018/11/05 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
入团者的自我评价分享
2013/12/02 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
2014年采购员工作总结
2014/11/18 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
单位接收函格式
2015/01/30 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
团组织推荐意见
2015/06/05 职场文书
学校标语口号大全
2015/12/26 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
golang为什么要统一错误处理
2022/04/03 Golang
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS