首先先介绍Meteor模板系统Spacebars:
Spachebars只是在HTML基础上多个标签,Meteor只是让模板和逻辑进行分离。为了让连接变得更加流畅,一个模板需要helper(helper就是厨师用的食材(数据),烹饪好佳肴(模板),再由服务器端到你面前),换另一种说法就是(模板的作用局限于显示或循环遍量,而helper则负责把值分配给变量)
为了简单起见,将采用helper和模板同名的方式创建,区别是前者后缀是js,后者后缀是html
就是简单的给HTML添加三件事:Inclusion(或Partial)、Expression和Block Helper
Inclusion:通过{{> templateName}}标记,直接告诉Meteor这部分需要用相同名称模板来取代
Expression:比如{{title}}标记,要么调用当前对象的属性,要么对应到当前模板管理器中定义的helper方法,并返回其方法值
Block Helper:在模板中控制流程的特殊标签如{{#each}}...{{/each}}或{{#if}}...{{/if}}
第一步:用《Meteor学习路程(一)之简介与安装》(http://blog.csdn.net/miss_ll/article/details/54312254)的方式新建一个Meteor项目【只有安装meteor的时候才需要翻墙,建项目不需要翻了】
第二步:为了让界面更美观,我们这里使用Bootstrap来进行美化。因此需要引入bootstrap
meteor add twbs:bootstrap
第二步:打开项目(我的名为template)中/client文件夹,在main.html中添加一个总标题栏并且添加模板的插入点{{> postsList}}标签
<body>
<div class="container">
<header class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="/">总标题</a>
</div>
</header>
<div id="main">
{{> postsList}}
</div>
</div>
</body>
第三步:建立模板文件。
1.在/client里面创建一个/templates文件夹用于存放所有模板,接着在/templates里面创建一个/posts文件夹存放帖子相关的小模板。
2.接下来在client/templates/posts目录中新建一个posts_list.html(html里面只有这个,其他全部删除哦)
<template name="postsList">
<div class="posts">
{{#each posts}}
{{> postItem}}
{{/each}}
</div>
</template>
3.再在此路径添加post_item.html
(html里面只有这个,其他全部删除哦)
<template name="postItem">
<div class="post">
<div class="post-content">
<h3>
<a href="{{url}}">{{title}}</a>
<span>{{domain}}</span>
</h3>
</div>
</div>
</template>
首先在postsList模板里通过{{#each}}...{{/each}}Block Helper去遍历一个posts对象,然后每次迭代都包含postItem模板。
postItem模板只用了三个标签{{url}}、{{title}}返回其集合属性,而{{domain}}则调用模板对应的helper方法
第四步:建立helper
1.在client/templates/posts目录中创建相应的posts_list.js helper文件
var postsData = [
{
title:'Introducing Telescope',
url:'http://sachagreif.com/introducing-telescope/'
},
{
title:'Meteor',
url:'http://meteor.com'
},
{
titile:'The Meteor Book',
url:'http://themeteorbook.com'
}
];
Template.postsList.helpers({
posts:postsData
});
解析:
首先放置一些虚拟的基本数据到postsData数组中;然后使用Meteor的Template.postsList.helper()函数,建立了posts模板helper来返回刚刚定义的postsData数组;定义posts helper就是让模板可以使用它,所以模板可以遍历postsData数组并将里面的每个对象发送到postItem模板中。
2.在client/templates/posts目录中创建相应的post_item.js文件
Template.postItem.helpers({
domain:function () {
var a = document.createElement('a');
a.href=this.url;
return a.hostname;
}
});
解析:
这次domain helper值不再是一个数组,而是一个匿名函数。
Meteor有一大很实用特点就是修改文件时,不需要手动刷新页面,浏览器就会自动重新加载。这是因为Meteor跟踪了项目目录下的所有文件,当检测到其中一个文件发生改动的时候,就会刷新浏览器。
最终结果如下: