第一个Polymer应用

原文链接: 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 方法会将数据的改变保存到server。在这个演示样例中,除了打印一下日志控制台消息外并没有处理这些工作。

大功告成

保存(建议编辑过程中随时保存,这是好的编码习惯) 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)