Meteor 初始化项目解析和模板

新建项目代码解析：

会创建三个文件html js css

html是模板文件，包含head body 和一个template 

body里通过{{>Xx}}来引用template 标识通过name属性

模板里不需要html 标签，它在母版里，生成会会组合在一起显示。

.html创建了template模板它就是模板，如果没有template。它就是普通的页面。

在生成时会在页面里显示。

可以把head 放在head.html页面里。不需要添加引用。meteor生成会找到并生成。

js文件：

它是在根目录的，所以会在两端运行。

需要通过Meteor.isClient 和Meteor.isServer 来判断是哪个端。

客户端：

Template.XX.helpers()来为指定的模板设置数据，可以有方法，需要有返回值就可。

Template.XX.events()来为指定的模板绑定事件。

模板：

可以在client里创建一个template用来保存模板文件。

创建postlist.html

<template name="postsList">
    <div class="posts">
        {{# each posts}}
            {{> postItem}}
        {{/each}}
    </div>
</template>

这里用到了# each 循环数组，还引用了postItem模板

创建postlist.js:

//指定模板的数据 //这里的find()可以进行再次筛选 //它会查找已经在本地的经过条件返回的集合，而不必再次从服务器请求数据来筛选  Template.postsList.helpers({
    posts:function(){
        return posts.find({type:'js'});//返回集合 游标  }
});

这里指定模板的数据posts数组

创建postitem.html:

<template name="postItem">
        <div class="post">
            <div class="post-content">
                <h3><a href="{{url}}">{{title}}</a>
                    <span>{{domain}}</span>
                </h3>
            </div>
            <a href="{{pathFor 'postPage'}}">discuss</a>
        </div>
</template>

模板里直接通过传递过来的对象属性直接绑定

postitem.js:

Template.postItem.helpers({
    domain:function(){
        var a=document.createElement('a');
        a.href=this.url;
        return a.hostname;
    }
})

这里可以扩展模板的绑定属性，定义一个方法，需要有返回值.

head.html里不需要引用添加了的css包。但里要引用自定义的css。

css 一般放在client/css文件夹里，templates里的模板引用需要 href="../css/XX.css"。

而图片需要放在publice/images里,css引用就../images/XX

helper语法:

都需要放在{{}}中，模板引用:> XX  

属性绑定直接属性名

语句都有开始和结束标签

{[# each XX}}

{{/each}}

{{#each per in people}}

{{/each}}

{{# if XX}}

{{else}}

{{/if}}