原文：http://danneu.com/posts/6-meteor-tutorial-for-fellow-noobs-adding-features-to-the-leaderboard-demo/
PS：本人英文水平有限，请多见谅。
--------------------------------
Meteor 是一个刚开始的javascript 框架。它的视频演示告诉我们可以很容易的建立Web实时应用，不需要学习更多专门的概念技术就可以实现像“实时”这一特性。这个有趣、且全新而流行的框架吸引着人们去试一试。
当时在 Hacker News submission 上有超过1100张头片宣告它的启动。
积分榜样例
我会添加一些新特性在 排行榜 这个应用上。
1．添加用户的表单
2．一个按钮去移除已有用户
3．新用户名字验证
你按照下面命令可以安装Meteor 并生成积分榜样例
$ curl install.meteor.com | sh $ meteor create --example leaderboard $ cd leaderboard $ meteor
一、添加用户的表单
我会写一个简单的表单用来添加新用户
首先，我写了一个新模板，模板包含一个文本输入框和一个按钮。
<!-- leaderboard.html -->
<template name="new_player">
<div class="new_player">
<input id="new_player_name" type="text" />
<input type="button" class="add" value="Add Player" />
</div>
</template>
注意: 由于有一个Meteor团队待修正的BUG, div 的容器是必须的因为事件选择不会工作在顶层元素。我抓狂了很久去找为什么我的点击事件没有反应。
把这几行代码放在 leaderboard 后面，并在leaderboard里加入：
<!-- leaderboard.html -->
<template name="leaderboard">
...
{{> new_player}}
</template>
现在给按钮添加事件绑定.
// leaderboard.js
Template.new_player.events = {
'click input.add': function () {
var new_player_name = document.getElementById("new_player_name").value;
Players.insert({name: new_player_name, score: 0});
}
};
注意这个事件是绑定在在刚写的模板名称域内的。
当“Add Player”按钮点击后，获取ID为#new_player_namer的文本框的值，并将该用户积分设为0，最后把它插入到用户集合（数据库）中。
你会注意到，它在Javscript文件的顶部声明。
// leaderboard.js
Players = new Meteor.Collection("players");
响应
当所绑定的模板引用发生变化，Meteor事件句柄会自动更新DOM。
主要理解这几点：
（1）这几个 Meteor 函数会在自动更新上下文会调用
- Meteor.ui.render and Meteor.ui.chunk
- Meteor.autosubscribe
- Templates
(2)更新的数据源会触发如下变化：
- Session variables
- Database queries on Collections
- Meteor.status
换句话说：
1、Meteor会自动更新模板
2、改变用户集合（数据库）将会自动触发重绘（更新模板）。
在验证用户的信息时，需要用到 Session 注意变量去通知错误信息的更新
二、移除用户
界面就像这个样子
我们把按钮添加在 player 模板上，player 模板会被循环遍历去创建用户列表。
<!-- leaderboard.html --> <template name="player"> <div class="player "> <input type="button" value="X" class="delete" /> <!-- here it is --> <span class="name"></span> <span class="score"></span> </div> </template>
下面要接着做的就是添加一个点击事件绑定在按钮上，用于移除数据库集合中指定的用户。
// leaderboard.js
Template.player.events = {
'click input.delete': function () { // <-- here it is
Players.remove(this._id);
},
'click': function () {
Session.set("selected_player", this._id);
}
};
三、新用户的信息验证
对于Meteor尚未成熟的主要问题是缺乏安全保障，即客户端可以对数据库进行任意操作。然而，对于处于预览版的Meteor，这点确实是个大问题。不过，Meteor创建人已经说明过会解决这一问题。
对新用户名采取2个验证规则：
1． 不能为空
2． 不存在集合（数据库）中
当验证失败时，错误信息会显示在输入框前：
添加错误信息进 “new_player” 模板
<!-- leaderboard.html -->
<template name="new_player">
<span id="error" style="color: red;">{{error}}</span>
<div class="new_player">
<input id="new_player_name" type="text" />
<input type="button" class="add" value="Add Player" />
</div>
</template>
例子中，我们设定 “Template.new_player.error” 返回 undefined 或者错误信息。
对于模板的自动更新响应，它需要上述更新部分的数据源（如template.xxxx.xxxs）。
例子中错误信息使用 Session来存储，命名为 error 。在浏览器console中，测试Session
>>> Session.keys
Object { }
>>> Session.set("error", "Name can't be blank");
>>> Session.keys
Object { error="Name can't be blank" }
>>> Session.get("error");
"Name can't be blank"
>>> Session.set("error", undefined)
>>> Session.keys
Object { }
这里是 Session API Doc
与模板中对应，绑定error 信息
// leaderboard.js
Template.new_player.error = function () {
return Session.get("error");
};
使用Validation 对象：
下面是几个简单的API：
a) Validation.clear() 会清除 Session 中错误信息 ( undefined )
b) Validation.set_error(message) 保存并显示错误信息
c) Validation.valid_name(name) 返回 ture 或 false，如果ture，清除错误信息，否则显示错误
d) Validation.player_exists(name) 如果集合中存在 name，返回 ture, 否则 返回 false
下面是Validation 对象的定义：
// leaderboard.js
var Validation = {
clear: function() {
return Session.set("error", undefined);
},
set_error: function(message) {
return Session.set("error", message);
},
valid_name: function(name) {
this.clear();
if (name.length == 0) {
this.set_error("Name can't be blank");
return false;
} else if (this.player_exists(name)) {
this.set_error("Player already exists");
return false;
} else {
return true;
}
},
player_exists: function(name) {
return Players.findOne({
name: name
});
}
};
在插入用户前需要验证，即将验证放在“Add Player ”点击事件上：
Template.new_player.events = {
'click input.addPlayer': function() {
var newPlayerName = document.getElementById('new_player_name').value.trim();
if (Validation.valid_name(newPlayerName)) {
Players.insert({
name: newPlayerName,
score: 0
});
};
}
};
注意：在验证之前，用户名先清除多余空格。
结语：
我认为这已经够了。
我晚些会更新这篇文章，添加更多特性，并且寻找javascript最佳实践。
原文：http://danneu.com/posts/6-meteor-tutorial-for-fellow-noobs-adding-features-to-the-leaderboard-demo/