##Meteor 应用文件结构
###改变初始目录文件结构
使用 meteor create 创建的应用目录结构需要变化, 以保证应用较大后目录结构的整洁.
删除 microscope 目录下的 microscope.* 文件, 并创建下面5个子目录:
client: 此目录中的代码只会在客户端运行;
server: 此目录中的代码只会在服务端运行;
public: 存放静态文件, 例如图片,字体等;
lib: 此文件夹中的文件将被首先载入, 适合放自己编写的辅助(库)代码;
collections: 此目录中保存数据序列化的代码.
注意两点: a. 所有没有放在 client或 server 目录下的代码将会在服务端和客户端上同时运行; b. 所有以”main.*” 命名的文件将在其他文件载入后载入.
###.meteor目录
此处存储 Meteor 的内部代码, 一般不需要关心, 除了.meteor/packages文件和. meteor/release 文件, 这两个文件列出了所安装的智能代码包和正在使用的 Meteor 版本.
##bootstrap
meteor add twbs:bootstrap-3
meteor add underscore
mizzao:bootstrap-3: HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
underscore: Collection of small helpers: .map, .each, …
##模板
{{> postsList } }
表示 postsList 模板的插入点.
在 /client 里面创建一个 /views 目录。存放所有的模板,以保持项目结构的清晰整洁,在 /views 下再创建各个不同数据对应的 view 的子目录(例如/posts) 来存放与相应数据相关的模板。
###查找文件
Meteor 的强大之处在于文件的查找。无论你把代码文件放在 /client 目录下的任何地方,Meteor 都可以找到它并且正确地进行编译。永远都不需要手动编写 JavaScript 或 CSS 文件的调用路径。
这也意味着你可能会把所有的文件放在同一目录,甚至所有的代码放在同一个文件。Meteor 会把一切的代码都编译到一个压缩文件,所以可以使用整洁的文件结构,提高项目的可读性。
###Handlebars
Handlebars 是一个简单的 HTML 模板,它包含三种语法: Partials , Expressions 和 Block Helpers 。
Partials :通过
{{> templateName} }
标记,简单直接地告诉 Meteor 这部分需要用相同名称的模板来取代(在我们的例子中就是 postItem )。
Expressions :比如
{{title} }
标记,它要么是调用当前对象的属性,要么就是对应到当前模板管理器中定义的 helper 方法,并返回其方法值。
Block Helpers :在模板中控制流程的特殊标签,如
{ {#each} } … { {/each} } 和 { {#if} } … { {/if} }
###模板的管理器
模板的作用是进行有限的显示或循环变量,而管理器的作用是:把值分配给每个变量。是一个 js 文件,一般与其管理的模板同名(模板的扩展名为 html, 管理器扩展名为 js).
在 client 目录下创建一个 helpers 目录, 在其中再创建各个不同数据对应的管理器的子目录(例如/posts).
一个示例的client目录结构如下:
client
├── helpers
│ └── posts
│ ├── post_item.js
│ └── posts_list.js
├── main.html
├── main.js
├── stylesheets
│ └── style.css
└── views
└── posts
├── post_item.html
└── posts_list.html
###helper中的 this
Template.postItem.helpers({
domain: function() {
var a = document.createElement('a');
a.href = this.url;
return a.hostname;
}
});
这里的 domain 是一个匿名函数, 返回一个 url.
{ { #each } }
模板不仅可以遍历数组, 还可以访问这个块中每个对象的属性, 即使用 this 加点连接的属性进行访问.
所以, this.url 返回当前数据条目的 url属性. 在模板(例如 post_item.html)中使用
{ { url } }
将会调用 this.url 得到正确的数据.
##集合(Collection)
Meteor 捆绑了 MongoDB 作为持久化存储, 数据被存储在集合中。 集合是一种特殊的数据结构, 通过发布(publications)和订阅(subscriptions)机制把数据实时同步上行或者下行到连接着的各个用户的浏览器或者Mongo数据库中。