项目的 Demo 在 http://juy.fm 。
接下来的几节会实现乐辑详细页的 sidebar 的结构、设计以及交互。先讲一下目前的需求:tabs 中有「返回列表(即聚合页)」、「使用指南」、「私人设置」和「我有话要说(即反馈)」四个选项。设计到的代码实现分别是:点击「返回列表」动画缩起 tabs,然后跳转到首页(easy);点击「使用指南」是一些文字介绍,在右侧覆盖乐辑显示(easy);点击「私人设置」可以在右侧模态做一些个性化设置,通过 localStorage 存储;点击「我有话要说」可以反馈或投稿,会用到 Meteor Collection 的 allow/deny 功能,直接通过客户端写入数据库。
在编写 sidebar 的结构时,我有意把结构和数据分离,并且把这类数据都统一放在一个 data.js 中,然后再通过上节提到的「模块依赖」的方式把值传给相应的 Template。同时也有一个疑问:{{#each tabs}} 包含的结构块有什么办法可以复用呢?
下一节将介绍点击 tab 动态加载 Template 并渲染的过程。
Github 地址:sidebar 结构