項目的 Demo 在 http://juy.fm 。
接上回羡儿,在搭建好樂輯詳細頁的 sidebar 之后礼患,今天首先實現(xiàn)「私人設置」的部分,會涉及到 localStorage 的使用掠归。
首先缅叠,私人設置部分的結(jié)構(gòu)自然還是通過 Template 定義的,不過它的渲染是動態(tài)渲染——點擊相應的 tab 才需要渲染虏冻。這里根據(jù)是否有渲染數(shù)據(jù)需要用到兩個方法:Blaze.render() 和 Blaze.renderWithData()肤粱。
其次,項目中表單部分的樣式我用了 semantic-ui 的插件厨相,所以表單結(jié)構(gòu)多了不少 class领曼。
再次,還是遵守結(jié)構(gòu)和數(shù)據(jù)分離的原則蛮穿,「私人設置」的所有可選項我仍然放在了 data.js 中庶骄,而用戶具體的選擇存在了 localStorage 中,每次提供給 Template 渲染的數(shù)據(jù)是這兩者的一個結(jié)合践磅。
最后单刁,因為 Handlebar 本身支持的邏輯處理非常非常弱,我又添加了 Handlebar helpers 插件府适,這樣可以在 Template 中直接處理類似 {{#if equals a b}} 這樣的常用邏輯羔飞,比如在勾選用戶設置的選項時需要把當前選項的值和 localStorage 中保存的用戶選擇的值做比較。
Github 地址:更復雜的模板渲染