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>
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跟蹤了專案目錄下的所有檔案,當檢測到其中一個檔案發生改動的時候,就會重新整理瀏覽器。
最終結果如下: