Meteor 初體驗（下）
本篇是 Meteor 初體驗（上）的後續，目標是很快的帶大家稍微認識一下 Meteor 這個 web framework。在上集中，我們介紹了基本的 Data 相關以及最基本的 template，在這集當中，我們會迅速的看過包括 events、server side 部分的程式碼、套件以及 deploy 的部份。同樣最終的 source code 放在 https://github.com/daikeren/hahanews。如果想先看看成果的也可以在 http://hahanews.meteor.com/ 看看。
Event 處理
在上一篇當中，我們只有透過 chrome 的 console 來插入新的 Link，接下來我們要來加點東西，讓我們可以在網頁上面動態的加上 Link。首先我們先來加上 input 的部份。我們在原本的 {{> link_list }} 下面加上一個新的 template add_new_link
HAHANews
{{> link_list }}
{{> add_new_link }}
其中 add_new_link 的內容如下
新增一條 HAHANews
標題
URL
這邊我們需要標題跟 URL，所以加上了兩個 input。接下來，我們需要處理當 Add 這個 button 被按下去的時候要處理的事情，這邊我們會用到 meteor 的 event 部分。打開 hahanews.js，在 if (Meteor.isClient) 當中加入以下的 code
Template.add_new_link.events = {
"click input#add_url" : function () {
var new_url = $("#url").val();
var new_title = $("#title").val();
Links.insert(
{
url : new_url,
title: new_title,
score: 0,
thumbs_up: 0,
thumbs_down: 0,
date: Date()
});
}
};
第一行的 Template.add_new_link.events 告訴了 meteor 說我們要來定義 add_new_link 這個 template 當中的 events，接下來的 2~4 行我相信只要有寫過 jQuery 的人應該都可以了解在幹啥。接下來的 Links.insert 部分就對應到了我們前一篇在 chrome 的 console 底下對 Links 做的操作。這邊除了 title 之外，我們還加上了 url、score、thumbs_up、thumbs_down、date 等欄位。這些是為了之後對每則 link 做加分/減分等功能用的。到這裡，我們在 input 當中輸入標題和 URL，應該就可以看到即時增加的結果。
接下來，我們要來做對每一則 link 加/減分的功能。我們一樣先來看看 hahanews.html 的部份。首先，在 link_list 的 template 當中，我們把 {{ title }} 的部份抽出來，並且加上加分/減分的按鈕
{{ title }} ({{url}})
{{ score }} 分 {{ date }}
並且把原本的 link_list template 部分改為:
HAHANews
{{> link_list }}
{{> add_new_link }}
接下來，我們打開 hahanews.js，在 if (Meteor.isClient) 的區段內加上 event www.atoledo.com handle 的部份
Template.link_detail.events = {
"click input#up" : function () {
Meteor.call("vote", this.title, "thumbs_up");
},
"click input#down" : function () {
Meteor.call("vote", this.title, "thumbs_down");
}
};
這邊可以看到在 “click input#up” 跟 “click input#down” 當中，我們透過 Meteor.call 來呼叫了 “vote” 這個 Server side 的 function，vote 的定義如下
if (Meteor.isServer) {
Meteor.startup(function () {
Meteor.methods({
vote: function (title, field){
new_obj = { $inc: {} };
if(field =="thumbs_up"){
new_obj.$inc["thumbs_up"] = 1;
new_obj.$inc["score"] = 1;
}
else {
new_obj.$inc["thumbs_down"] = 1;
new_obj.$inc["score"] = -1;
}
Links.update( { title : title }, new_obj );
}
});
});
}
在這邊，我們透過了 Meteor.methods 來定義了 Server side 的 function，vote 這個 function 分別傳入了 title 和 field，其中我們透過 field 來判斷是對一則 link 要加分還是減分。第五行的 new_obj = { $inc: {} } 是跟 MongoDB 相關的操作，代表要對某個欄位做 increment 的動作，這部份可以參考 MongoDB 的 Update 部分。最後再透過 Links.update 來更新相對應的 link。
套件
對於一個良好的 web framework 來說，有方便的套件管理機制是很重要的。Meteor 當然也有考慮到套件管理這部份。要新增一個套件到你的 Meteor app 當中，只要輸入
meteor add {package}
舉例來說，我們的 hahanews 有用了 Twitter Bootstrap 這套 Frontend Framework，只要輸入
meteor add bootstrap
就可以在你的 frontend 當中使用 Twitter Bootstrap 的 css 以及 js，你可以不用手動的加入 css 以及 js 的 link。關於更多 Package 的部份，可以參考 Meteor 的官方文件。
Deploy
好不容易寫好了你的 Application，想要放上去給大家看看該怎麼辦呢？目前有兩種方法，第一種是比較簡單的直接輸入
meteor deploy site
這邊的 site 就是由 meteor.com 提供的 url，以我們這邊的例子，就是 http://hahanews.meteor.com/。之後 meteor 就會自動幫你把 code push 到 meteor 所提供的免費環境當中。第二種方法則是 hosting 在自己的 server，則是要先輸入
meteor bundle
把你的 meteor app 打包，之後再參考 Meteor 的說明文件做 server 的設定。
小結
到這邊為止我們為大家很快的體驗了一下 Meteor 這個強大的 framework，如果對 Meteor 還有興趣，最好的方法是參考官方的 Github 或是文件。如果有其他的想法，也歡迎可以多多交流指教。期待在不遠的未來可以看到 Meteor 這個 framework 進入正式版，讓我們未來開發的工作更加輕鬆愉快 🙂
