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实现回车键提交表单方法总结
Jan 10 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 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 IF ELSE简化/三元一次式的使用
2011/08/22 PHP
php实现短信发送代码
2015/07/05 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
Python判断变量是否已经定义的方法
2014/08/18 Python
python文件写入实例分析
2015/04/08 Python
深入理解Python对Json的解析
2017/02/14 Python
对Python中plt的画图函数详解
2018/11/07 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
教师对学生的评语
2014/04/28 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
奉献演讲稿范文
2014/05/21 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL