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

原文链接: Step 4: Finishing touches
翻译日期: 2014年7月8日
翻译人员: 铁锚

在本节中,会在卡片上添加收藏按钮,并可以通过切换选项卡(tabs)连接到不同的 <post-list> 控制器, 整个应用就算完成了.
在本节中,您将学习:

• 声明事件处理(event handling)
• 向元素的原型(prototype)添加属性和方法(properties and methods)
• 自动节点查找(Automatic node finding)

编辑 post-card.html 文件

进入根目录下的starter目录, 打开 post-card.html 文件. 添加  <core-icon> 元素:

<div class="card-header" layout horizontal center>
  <content select="img"></content>
  <content select="h2"></content>
</div>

<core-icon-button
  id="favicon"
  icon="favorite"
  on-tap="{{favoriteTapped}}">
</core-icon-button>

<content></content>

说明:

• 顾名思义, <core-icon-button> 创建一个嵌入图标的button. Polymer 包含了一写可伸缩的图标集合。
• icon="favorite" 属性从默认图标集中选择心形图标.
• on-tap="{{favoriteTapped}}" 属性在 post-card 元素上指定一个回调方法,当触摸(tap)按钮时就会调用。

---------------------------------------------------------------------------------------------

将 favorite 属性(property) 以及 favoriteTapped 方法添加到元素的原型(prototype).

  <script>
  Polymer({
    publish: {
      favorite: {
        value: false,
        reflect: true
      }
    },
    favoriteTapped: function(event, detail, sender) {
      this.favorite = !this.favorite;
      this.fire('favorite-tap');
    }
  });
  </script>

说明:

• publish 对象是另一种指定发布属性的方式,和步骤3中所示的 attributes 属性一样的功能。此处 favorite 属性的默认值为 false , 通过设置反射(reflects), 意味着在属性值发生变化时 favorite 属性会被更新
• favoriteTapped事件切换 favorite 属性(this.favorite)的状态,并使用内置的 fire 方法触发自定义事件,。( fire 是 Polymer 添加到每个自定义元素原型的工具方法之一)

这些变化的结果是,当触摸 favorite 按钮时,favorite 属性值被更新, 并且根据其相应的属性被设置或还原。
但现在还没有标识按钮被按下的视觉效果。

---------------------------------------------------------------------------------------------------

为 favorite 按钮添加以下CSS样式:

  core-icon-button {
    position: absolute;
    top: 3px;
    right: 3px;
    fill: #636363;
  }
  :host([favorite]) core-icon-button {
    fill: #da4336;
  }

说明:

• fill 属性设置图标的填充颜色。
• :host([favorite]) core-icon-button 选择器设置当自定义元素设置了 favorite 属性时的填充颜色.

-------------------------------------------------------------------------------
保存 post-card.html.
保存之后,你可以刷新页面,看看 favorite 按钮的效果, 当然还有一些步骤需要完成。

编辑 index.html 文件

打开index.html ,更新tab的事件处理器,当用户切换选项卡时切换 <post-list> 的状态:

  <script>
    // 获取选项卡DOM元素 paper-tabs
    var tabs = document.querySelector('paper-tabs');
	var list = document.querySelector('post-list');
    // 添加事件监听, 很明显,你需要chrome浏览器来运行
    // 这里每次切换会触发2次,前一个tab取消选中,以及新tab被选中
    tabs.addEventListener('core-select', function(e) {
	  //
	  list.show = tabs.selected;
      //
      var detail = e["detail"] || {};
      var item = detail["item"] || {};
      var isSelected = detail["isSelected"];
      console.log(
        "Tab(\""+ item["innerText"] + "\") changeTo: "+ isSelected +";"
        +" [" + tabs.selected + "] isSelected "
        );
    });
  </script>

保存 index.html 文件.

-------------------------------------------------------------------------------------
编辑 post-list.html

在编辑器中打开 post-list.html 文件.
更新 template ,将 <post-card> 元素连接上favorites:

    <template repeat="{{post in posts}}">

      <post-card
        favorite="{{post.favorite}}"
        on-favorite-tap="{{handleFavorite}}"
        hidden?="{{show == 'favorites' && !post.favorite}}">

        <img src="{{post.avatar}}" width="70" height="70">
        <h2>{{post.username}}</h2>
        <p>{{post.text}}</p>
      </post-card>
    </template>

说明:

• favorite="{{post.favorite}}" 将卡片元素的 favorite 值绑定到 <post-service> 持有数组中的值
• on-favorite-tap属性为 <post-card> 的 favorite-tap 事件设置一个事件处理程序
• hidden?="{{}}" 表达式是boolean属性的特殊语法,如果绑定的表达式计算值为true则设置该属性

hidden 的绑定表达式实际的作用是在 <所有> 与 <收藏> 选项卡之间切换。

-----------------------------------------------------------

为 favorite-tap 事件添加事件处理程序:

  <script>
  Polymer({
    handleFavorite: function(event, detail, sender) {
      var post = sender.templateInstance.model.post;
      this.$.service.setFavorite(post.uid, post.favorite);
    }
  });
  </script>

说明:

• sender.templateInstance.model 是模型数据的一个引用,用来构建模板实例。在这里,它包含用来创建一个 <post-card> 的 post对象, 所以你可以获取它的ID以及 favorite 值。
• 自定义元素的 shadow DOM 中的每个元素都有一个 id 属性被加到了 this.$ 字典(dictionary)中。这被称为自动节点发现(automatic node finding.)

如果这是一个真实的社交网络服务, setFavorite 方法会将数据的改变保存到服务器。在这个示例中,除了打印一下日志控制台消息外并没有处理这些工作。

大功告成

保存(建议编辑过程中随时保存,这是好的编码习惯) post-list.html 文件,部署,然后用chrome打开链接或刷新页面, 比如:
http://localhost:8080/polymer-tutorial-master/starter/index.html

大功告成! 如果幸运的话,您的应用程序看起来像这样:

图 Step4完成后的效果.

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

开始下一个项目
准备好开始一个你自己的项目了吗?安装一些 Polymer 组件并开始工作吧!

--> 下一个项目: 安装组件(Installing components)