原文链接: 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

则显示效果如下所示:

图 Step3完成后的效果.

如果发生错误或不显示,可以和 step-3 目录下的 post-list.html, index.html 文件对比,当然,你也可以直接访问这下面的文件试试效果。

动手实践:  
打开 post-service.html 看看组件的工作机制。在内部,它使用 <core-ajax> 元素来执行的HTTP请求。

下一节

第一个Polymer应用 - (4)收尾工作

第一个Polymer应用 - (3)使用数据绑定的更多相关文章

  1. 第一个Polymer应用 - (2)创建你自己的元素

    原文链接: Step 2: Your own element翻译日期: 2014年7月6日翻译人员: 铁锚通过上一节的学习和实践, 您已经完成了一个基本的应用程序结构(application stru ...

  2. 第一个Polymer应用 - (1)创建APP结构

    原文链接: Step 1: Creating the app structure翻译日期: 2014年7月5日翻译人员: 铁锚在本节中,将使用一些预先构建好的Polymer元素来创建基本的应用程序结构 ...

  3. 第一个Polymer应用 - (0)准备工作

    原文链接:  Getting Started - Your first Polymer application翻译时间: 2014年7月5日翻译人员: 铁锚 关于Polymer 的简介,请参考 CSD ...

  4. 第一个Polymer应用 - (4)收尾工作

    原文链接: Step 4: Finishing touches翻译日期: 2014年7月8日翻译人员: 铁锚在本节中,会在卡片上添加收藏按钮,并可以通过切换选项卡(tabs)连接到不同的 <po ...

  5. 【转】Polymer API开发指南 (二)(翻译)

    原文转自:http://segmentfault.com/blog/windwhinny/1190000000596258 公开 property 当你公开一个 Polymer 元素的 propert ...

  6. 【转】Polymer API开发指南 (一)(翻译)

    原文转自:http://segmentfault.com/blog/windwhinny/1190000000592324 翻译的不好,轻拍 Polymer是google的一款前端开发框架,其基于Sh ...

  7. Polymer API开发指南 (二)(翻译)

    公开 property 当你公开一个 Polymer 元素的 property 名字时,就等于把这个 property 设置为公开API了.公开 property 会有如下的特性: 支持声明数据双向绑 ...

  8. 使用Object.observe 实现数据绑定

    Object.observe API概述 最近,JavaScript的MVC框架在Web开发届非常盛行.在实现MVC框架的时候,一个非常重要的技术就是数据绑定技术.如果要实现模型与视图的分离,就必须要 ...

  9. [uwp开发]数据绑定那些事(2)

    接着上一篇来侃. 二.实体到控件之间的绑定 这儿不知道用实体这个词恰不恰当,凑活着理解就行了.他可以是一个类实例,也可以是一个集合. 所以,相应的我们就引入两个Demo,第一个介绍用简单的类作为作为数 ...

随机推荐

  1. android的消息通知栏

    在android的应用层中,涉及到很多应用框架,例如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架,通知机制,ActionBar框架等等. ...

  2. Java基本语法-----java数据类型的转换

    前言 Java中可以进行不同数据类型的加减乘除运算吗?是可以的.在算术运算符中已经体验过如果两个整数(int)相除会去掉小数部分.如果需要保留小数部分,可以让除数或者被除数变为double类型的(5变 ...

  3. 【NPR】铅笔画

    写在前面 今天打算写一篇跟Unity基本无关的文章.起因是我上个星期不知怎么的搜到了一个网站 ,里面实现的效果感觉挺好的,后来发现是2012年的NPAR会议的最佳论文.看了下文章,觉得不是很难,就想着 ...

  4. ROS_Kinetic_x 基於ROS和Gazebo的RoboCup中型組仿真系統(多機器人協作)

    國防科學技術大學發布了RoboCup中型組仿真平臺,基於ROS和Gazebo設計. 該平臺可以用於多機器人協作研究.參考資料如下: ROS新聞:1    http://www.ros.org/news ...

  5. 【一天一道LeetCode】#205. Isomorphic Strings

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given t ...

  6. MyBatis与MySQL交互

    MyBatis是我接触到的第一个框架,下面谈一谈我第一次使用MyBatis时的感悟. 首先是一些准备工作 下载相关的jar包.到GitHub上就行,上面有全面和完整的jar文件 在eclipse上安装 ...

  7. spark概念、编程模型和模块概述

    http://blog.csdn.net/pipisorry/article/details/50931274 spark基本概念 Spark一种与 Hadoop 相似的通用的集群计算框架,通过将大量 ...

  8. Linux内核编译时会遇到的问题--缺少mkimage

    由于各大平台所带的内核不同,所以编译方式也不同,但方法都是大同小异. 但是,编译内核有时候会提示缺少mkimage这个命令,如何解决? 供应商提供内核的同时也会提供其它的一些,比如Uboot,root ...

  9. 06_NoSQL数据库之Redis数据库:Redis的高级应用之登录授权和主从复制

     Redis高级实用特征 安全性(登录授权和登录后使用auth授权) 设置客户端连接后进行任何其他指定前需要使用的密码. 警告:因为redis速度相当快,所以在一台比较好的服务器下,一个外部的用户 ...

  10. Access数据类型和.NET数据类型映射

    下表列出了 Microsoft Access 和这些数据类型与 Microsoft.NET Framework 数据类型与 OleDbType 枚举的方式中使用的最常见的数据类型. 访问类型名称 数据 ...