原文链接: 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
大功告成! 如果幸运的话,您的应用程序看起来像这样:
如果发生错误或不显示,可以和 finished 目录下的 post-card.html, post-list.html, index.html 文件对比,当然,你也可以直接访问这下面的文件试试效果。
开始下一个项目
准备好开始一个你自己的项目了吗?安装一些 Polymer 组件并开始工作吧!
--> 下一个项目: 安装组件(Installing components)