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 相关文章推荐
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
jQuery filter函数使用方法
May 19 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 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中显示格式化的用户输入
2006/10/09 PHP
用PHP实现维护文件代码
2007/06/14 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
css配合jquery美化 select
2013/11/29 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
谈谈如何手动释放Python的内存
2016/12/17 Python
spyder常用快捷键(分享)
2017/07/19 Python
Python科学画图代码分享
2017/11/29 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python中常见的异常总结
2018/02/20 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python中的协程深入理解
2019/06/10 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
介绍一下write命令
2014/08/10 面试题
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
大学毕业寄语大全
2014/04/10 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
国庆节标语大全
2014/10/08 职场文书
公司介绍信范文
2015/01/31 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书