項目的 Demo 在 http://juy.fm 。
接下來的幾節會實現樂輯詳細頁的 sidebar 的結構、設計以及交互。先講一下目前的需求:tabs 中有「返回列表(即聚合頁)」、「使用指南」、「私人設置」和「我有話要說(即反饋)」四個選項。設計到的代碼實現分別是:點擊「返回列表」動畫縮起 tabs,然后跳轉到首頁(easy);點擊「使用指南」是一些文字介紹,在右側覆蓋樂輯顯示(easy);點擊「私人設置」可以在右側模態做一些個性化設置,通過 localStorage 存儲;點擊「我有話要說」可以反饋或投稿,會用到 Meteor Collection 的 allow/deny 功能,直接通過客戶端寫入數據庫。
在編寫 sidebar 的結構時,我有意把結構和數據分離,并且把這類數據都統一放在一個 data.js 中,然后再通過上節提到的「模塊依賴」的方式把值傳給相應的 Template。同時也有一個疑問:{{#each tabs}} 包含的結構塊有什么辦法可以復用呢?
下一節將介紹點擊 tab 動態加載 Template 并渲染的過程。
Github 地址:sidebar 結構