項(xiàng)目的 Demo 在 http://juy.fm 。

接下來(lái)的幾節(jié)會(huì)實(shí)現(xiàn)樂(lè)輯詳細(xì)頁(yè)的 sidebar 的結(jié)構(gòu)、設(shè)計(jì)以及交互。先講一下目前的需求：tabs 中有「返回列表（即聚合頁(yè)）」、「使用指南」、「私人設(shè)置」和「我有話要說(shuō)（即反饋）」四個(gè)選項(xiàng)。設(shè)計(jì)到的代碼實(shí)現(xiàn)分別是：點(diǎn)擊「返回列表」動(dòng)畫(huà)縮起 tabs，然后跳轉(zhuǎn)到首頁(yè)（easy）；點(diǎn)擊「使用指南」是一些文字介紹，在右側(cè)覆蓋樂(lè)輯顯示（easy）；點(diǎn)擊「私人設(shè)置」可以在右側(cè)模態(tài)做一些個(gè)性化設(shè)置，通過(guò) localStorage 存儲(chǔ)；點(diǎn)擊「我有話要說(shuō)」可以反饋或投稿，會(huì)用到 Meteor Collection 的 allow/deny 功能，直接通過(guò)客戶端寫(xiě)入數(shù)據(jù)庫(kù)。

在編寫(xiě) sidebar 的結(jié)構(gòu)時(shí)，我有意把結(jié)構(gòu)和數(shù)據(jù)分離，并且把這類(lèi)數(shù)據(jù)都統(tǒng)一放在一個(gè) data.js 中，然后再通過(guò)上節(jié)提到的「模塊依賴(lài)」的方式把值傳給相應(yīng)的 Template。同時(shí)也有一個(gè)疑問(wèn)：{{#each tabs}} 包含的結(jié)構(gòu)塊有什么辦法可以復(fù)用呢？

下一節(jié)將介紹點(diǎn)擊 tab 動(dòng)態(tài)加載 Template 并渲染的過(guò)程。

Github 地址：sidebar 結(jié)構(gòu)