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_02_理解undefined和null
Oct 11 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 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防止sql注入代码实例
2013/12/18 PHP
php两种无限分类方法实例
2015/04/21 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
Python制作动态字符图的实例
2019/01/27 Python
浅谈Python中的继承
2020/06/19 Python
Python读写锁实现实现代码解析
2020/11/28 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
高级Java程序员面试题
2016/06/23 面试题
公司副总经理岗位职责
2014/10/01 职场文书
融资合作协议书范本
2014/10/17 职场文书
辞职信怎么写
2015/02/27 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
爱心募捐通知范文
2015/04/27 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript