Meteor學習路程（二）之模板的例子
首先先介紹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><template name="postItem">
<div class="post">
<div class="post-content">
<h3>
<a href="{{url}}">{{title}}</a>
<span>{{domain}}</span>
</h3>
</div>
</div>
</template>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跟蹤了專案目錄下的所有檔案，當檢測到其中一個檔案發生改動的時候，就會重新整理瀏覽器。
最終結果如下：
