第一个Polymer应用 - (3)使用数据绑定
原文链接: Step 3: Using data binding
翻译日期: 2014年7月7日
翻译人员: 铁锚
我们创建的个人信息卡还算漂亮,但对整个应用来说,只有一张卡片看起来有点空荡荡的感觉。在本节中,将通过web服务获取数据,并使用Polymer的数据绑定(data binding)来显示一系列的卡片。
获取数据,需要使用初始应用程序(starter)提供的 <post-service> 元素。该元素为虚拟社交网络提供了一个非常简单的API。在本节中,您将使用 posts 属性, 它返回像下面这样的post 对象组成的数组:
{ "uid": 2, "text" : "Loving this Polymer thing.", "username" : "Rob", "avatar" : "../images/avatar-02.svg", "favorite": false }
编辑 post-list.html 文件
进入根目录下面的 starter 目录, 用编辑器打开 post-list.html 文件.
<link rel="import" href="../components/polymer/polymer.html"> <link rel="import" href="post-service.html"> <link rel="import" href="post-card.html"> <polymer-element name="post-list" attributes="show"> <template> <style> :host { display: block; width: 100%; } post-card { margin-bottom: 30px; } </style> <!-- 这里可以添加其他标签 --> ...
说明:
- 文件已经包含了<post-service>元素的导入,所以可以直接使用。
- 属性 attributes="show" 创建了一个名为 show 的 published property(发布属性)。
一个 published property(发布属性) 是指在标签中可以通过配置而使用一个特性(attribute), 或使用双向数据绑定(two-way data binding)连接到另一个属性。在后面的步骤中您将使用 show 属性。 关于发布属性,可以参考这篇中文翻译: Polymer API开发指南 (二)(翻译)
------------------------------------------------------------------------------------
在元素的 <template> 中添加一个 <post-service> 元素:
... <post-service id="service" posts="{{posts}}"> </post-service> ...
说明:
- posts="{{posts}}" 属性在 <post-service> 和 你的自定义元素间添加了双向(two-way)数据绑定.
数据绑定(data binding)连接服务(service)元素的 posts 属性到一个本地属性( local property,这里也称为 posts )。你在自定义元素中定义的所有方法都可以通过 this.posts 访问这个响应对象。
----------------------------------------------------------------------------------------------------------------
显示动态列表名片卡
在 <post-service> 元素后面添加下面的 <div> 和 <template> 标签:
<div layout vertical center> <template repeat="{{post in posts}}"> <post-card> <img src="{{post.avatar}}" width="70" height="70"> <h2>{{post.username}}</h2> <p>{{post.text}}</p> </post-card> </template> </div>
说明:
- 这个新的语法 repeat="{{post in posts}}" ,让模板(template )为 posts 数组中的每个item 创建一个新的实例。
- 在每个模板实例中,每个单独的绑定(例如 {{post.avatar}} )都会被item中相应的值替换。
编辑 index.html 文件
将 <post-list> 元素导入 index.html
打开 index.html 并引入 post-list.html 文件添加导入链接。你可以用 post-list.html 替换现有的 post-card.html 文件:
<link rel="import" href="post-list.html">
-------------------------------------------------------------------------------------
使用 <post-list> 元素.
找到上一节中你添加的 <post-card> 元素,然后把它替换成 <post-list>:
... <div class="container" layout vertical center> <post-list show="all"></post-list> </div> ...
检验成果
保存(建议编辑过程中随时保存,这是好的编码习惯) index.html 文件,部署,然后用chrome打开链接或刷新页面, 比如:
http://localhost:8080/polymer-tutorial-master/starter/index.html
则显示效果如下所示:
如果发生错误或不显示,可以和 step-3 目录下的 post-list.html, index.html 文件对比,当然,你也可以直接访问这下面的文件试试效果。
动手实践:
打开 post-service.html 看看组件的工作机制。在内部,它使用 <core-ajax> 元素来执行的HTTP请求。
下一节
第一个Polymer应用 - (4)收尾工作
第一个Polymer应用 - (3)使用数据绑定的更多相关文章
- 第一个Polymer应用 - (2)创建你自己的元素
原文链接: Step 2: Your own element翻译日期: 2014年7月6日翻译人员: 铁锚通过上一节的学习和实践, 您已经完成了一个基本的应用程序结构(application stru ...
- 第一个Polymer应用 - (1)创建APP结构
原文链接: Step 1: Creating the app structure翻译日期: 2014年7月5日翻译人员: 铁锚在本节中,将使用一些预先构建好的Polymer元素来创建基本的应用程序结构 ...
- 第一个Polymer应用 - (0)准备工作
原文链接: Getting Started - Your first Polymer application翻译时间: 2014年7月5日翻译人员: 铁锚 关于Polymer 的简介,请参考 CSD ...
- 第一个Polymer应用 - (4)收尾工作
原文链接: Step 4: Finishing touches翻译日期: 2014年7月8日翻译人员: 铁锚在本节中,会在卡片上添加收藏按钮,并可以通过切换选项卡(tabs)连接到不同的 <po ...
- 【转】Polymer API开发指南 (二)(翻译)
原文转自:http://segmentfault.com/blog/windwhinny/1190000000596258 公开 property 当你公开一个 Polymer 元素的 propert ...
- 【转】Polymer API开发指南 (一)(翻译)
原文转自:http://segmentfault.com/blog/windwhinny/1190000000592324 翻译的不好,轻拍 Polymer是google的一款前端开发框架,其基于Sh ...
- Polymer API开发指南 (二)(翻译)
公开 property 当你公开一个 Polymer 元素的 property 名字时,就等于把这个 property 设置为公开API了.公开 property 会有如下的特性: 支持声明数据双向绑 ...
- 使用Object.observe 实现数据绑定
Object.observe API概述 最近,JavaScript的MVC框架在Web开发届非常盛行.在实现MVC框架的时候,一个非常重要的技术就是数据绑定技术.如果要实现模型与视图的分离,就必须要 ...
- [uwp开发]数据绑定那些事(2)
接着上一篇来侃. 二.实体到控件之间的绑定 这儿不知道用实体这个词恰不恰当,凑活着理解就行了.他可以是一个类实例,也可以是一个集合. 所以,相应的我们就引入两个Demo,第一个介绍用简单的类作为作为数 ...
随机推荐
- Oracle 11g客户端及PLSQL Developer配置|Instant Client Setup-64位|OraClientLite11g_x86
转载自:http://blog.csdn.net/xiaoyw71/article/details/45311589 Oracle 11g客户端 资源 下载资源,直接解压进行配置 Oracle官方资源 ...
- 关于Android PullTorefreshScrollview回到顶部实例
列表滑动下面显示按钮,点击按钮回到顶部的功能,一般scrollview会有滑动监听的事件,通过setOnScrollChangeListener()滑动监听滑动的距离来判断是否显示按钮就好了,但是Pu ...
- sql server中高并发情况下 同时执行select和update语句死锁问题 (二)
SQL Server死锁使我们经常遇到的问题,数据库操作的死锁是不可避免的,本文并不打算讨论死锁如何产生,重点在于解决死锁.希望对您学习SQL Server死锁方面能有所帮助. 死锁对于DBA或是数据 ...
- Effective C++ ——实现
条款26:尽可能延后变量定义式的出现时间 当你定义一个变量的时候就要保证这个变量能够在程序中使用到,不要定义无意义的变量,这样就要求我们最好是在变量使用到的时候才做定义,因为如果一个变量定义了却不使用 ...
- 验证码程序Demo
小伙伴都有这样的经历,册各种网站,总是输不对验证码,双十一那天狂买的小伙伴是不是对输入验证码有着不一样的感触呢,以前觉得验证码真是个麻烦鬼,一个不小心,一个眼拙,哎呦,没有输入正确,又是一阵子大眼瞪小 ...
- 高仿QQ头像截取
花费了半天时间,把 仿QQ头像截取的方法整理了下,并制作了一个demo以供大家参考,基本上实现了qq中我的资料界面上(包括背景透明化,上滑标题栏显示,下拉隐藏等)的大致效果,先上图看效果吧: 支持的功 ...
- java的overload与override
概括 方法的重写(Overriding)和重载(Overloading)是Java多态性的不同表现.重写(Overriding)是父类与子类之间多态性的一种表现,而重载(Overloading)是一个 ...
- ROS_Kinetic_25 在ubuntu16.04使用Leap_motion并作为手势输入控制Gazebo中的机器人
ROS_Kinetic_25 在ubuntu16.04使用Leap_motion并作为手势输入控制Gazebo中的机器人 先附上资料网址: 1. https://developer.leapmoti ...
- UNIX网络编程——客户/服务器程序设计示范(六)
TCP并发服务器程序,每个客户一个线程 前面讲述了,每个客户一个进程的服务器,或为每个客户现场fork一个子进程,或者预先派生一定数目的子进程.如果服务器主机支持线程,我们就可以改用线程以取代子进程. ...
- Android的TabHost组件-android的学习之旅(四十)
TabHost简介 虽然,官方建议用Fagment取代TabHost,但是我们还是大概的介绍一下.TabHost是一种非常简单的组件,TabHost可以很方便的在窗口放置多个标签页,每一个标签页相当于 ...