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

<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)按钮时就会调用。

  <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 添加到每个自定义元素原型的工具方法之一)

  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 属性时的填充颜色.

  <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>

    <template repeat="{{post in posts}}">
      
      <post-card
        favorite="{{post.favorite}}"
        on-favorite-tap="{{handleFavorite}}"
        hidden?="{{show == ‘favorites‘ && !post.favorite}}">
        
        <img src=http://www.mamicode.com/"{{post.avatar}}" width="70" height="70">>说明:
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)