项目的 Demo 在 http://juy.fm 。
接上回,在搭建好乐辑详细页的 sidebar 之后,今天首先实现「私人设置」的部分,会涉及到 localStorage 的使用。
首先,私人设置部分的结构自然还是通过 Template 定义的,不过它的渲染是动态渲染——点击相应的 tab 才需要渲染。这里根据是否有渲染数据需要用到两个方法:Blaze.render() 和 Blaze.renderWithData()。
其次,项目中表单部分的样式我用了 semantic-ui 的插件,所以表单结构多了不少 class。
再次,还是遵守结构和数据分离的原则,「私人设置」的所有可选项我仍然放在了 data.js 中,而用户具体的选择存在了 localStorage 中,每次提供给 Template 渲染的数据是这两者的一个结合。
最后,因为 Handlebar 本身支持的逻辑处理非常非常弱,我又添加了 Handlebar helpers 插件,这样可以在 Template 中直接处理类似 {{#if equals a b}} 这样的常用逻辑,比如在勾选用户设置的选项时需要把当前选项的值和 localStorage 中保存的用户选择的值做比较。
Github 地址:更复杂的模板渲染
网友评论