原文：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 并生成积分榜样例
1 $ curl install.meteor.com | sh 2 $ meteor create --example leaderboard 3 $ cd leaderboard 4 $ meteor
我会写一个简单的表单用来添加新用户
首先，我写了一个新模板，模板包含一个文本输入框和一个按钮。
1 <!-- leaderboard.html --> 2 <template name="new_player"> 3 <div class="new_player"> 4 <input id="new_player_name" type="text" /> 5 <input type="button" class="add" value="Add Player" /> 6 </div> 7 </template>
注意: 由于有一个Meteor团队待修正的BUG, div 的容器是必须的因为事件选择不会工作在顶层元素。我抓狂了很久去找为什么我的点击事件没有反应。
把这几行代码放在 leaderboard 后面，并在leaderboard里加入：
1 <!-- leaderboard.html --> 2 <template name="leaderboard"> 3 ... 4 5 {{> new_player}} 6 7 </template>
现在给按钮添加事件绑定.
1 // leaderboard.js 2 Template.new_player.events = { 3 'click input.add': function () { 4 var new_player_name = document.getElementById("new_player_name").value; 5 Players.insert({name: new_player_name, score: 0}); 6 } 7 };
注意这个事件是绑定在在刚写的模板名称域内的。
当“Add Player”按钮点击后，获取ID为#new_player_namer的文本框的值，并将该用户积分设为0，最后把它插入到用户集合（数据库）中。
你会注意到，它在Javscript文件的顶部声明。
1 // leaderboard.js 2 Players = new Meteor.Collection("players");
当所绑定的模板引用发生变化，Meteor事件句柄会自动更新DOM。
主要理解这几点：
（1）这几个 Meteor 函数会在自动更新上下文会调用
Meteor.ui.render and Meteor.ui.chunkMeteor.autosubscribeTemplates
(2)更新的数据源会触发如下变化：
Session variablesDatabase queries on CollectionsMeteor.status
换句话说：
1、Meteor会自动更新模板
2、改变用户集合（数据库）将会自动触发重绘（更新模板）。
在验证用户的信息时，需要用到 Session 注意变量去通知错误信息的更新
界面就像这个样子
我们把按钮添加在 player 模板上，player 模板会被循环遍历去创建用户列表。
1 <!-- leaderboard.html --> 2 <template name="player"> 3 <div class="player "> 4 <input type="button" value="X" class="delete" /> <!-- here it is --> 5 <span class="name"></span> 6 <span class="score"></span> 7 </div> 8 </template>
下面要接着做的就是添加一个点击事件绑定在按钮上，用于移除数据库集合中指定的用户。
1 // leaderboard.js 2 Template.player.events = { 3 'click input.delete': function () { // <-- here it is 4 Players.remove(this._id); 5 }, 6 'click': function () { 7 Session.set("selected_player", this._id); 8 } 9 };
对于Meteor尚未成熟的主要问题是缺乏安全保障，即客户端可以对数据库进行任意操作。然而，对于处于预览版的Meteor，这点确实是个大问题。不过，Meteor创建人已经说明过会解决这一问题。
对新用户名采取2个验证规则：
1． 不能为空
2． 不存在集合（数据库）中
当验证失败时，错误信息会显示在输入框前：
添加错误信息进 “new_player” 模板
1 <!-- leaderboard.html --> 2 <template name="new_player"> 3 4 <span id="error" style="color: red;">{{error}}</span> 5 6 <div class="new_player"> 7 <input id="new_player_name" type="text" /> 8 <input type="button" class="add" value="Add Player" /> 9 </div> 10 </template>例子中，我们设定 “Template.new_player.error” 返回 undefined 或者错误信息。
对于模板的自动更新响应，它需要上述更新部分的数据源（如template.xxxx.xxxs）。
例子中错误信息使用 Session来存储，命名为 error 。在浏览器console中，测试Session
1 >>> Session.keys 2 Object { } 3 4 >>> Session.set("error", "Name can't be blank"); 5 >>> Session.keys 6 Object { error="Name can't be blank" } 7 8 >>> Session.get("error"); 9 "Name can't be blank" 10 11 >>> Session.set("error", undefined) 12 >>> Session.keys 13 Object { }这里是 Session API Doc
与模板中对应，绑定error 信息
// leaderboard.js Template.new_player.error = function () { return Session.get("error"); };
下面是几个简单的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 对象的定义：
1 // leaderboard.js 2 var Validation = { 3 clear: function() { 4 return Session.set("error", undefined); 5 }, 6 set_error: function(message) { 7 return Session.set("error", message); 8 }, 9 valid_name: function(name) { 10 this.clear(); 11 if (name.length == 0) { 12 this.set_error("Name can't be blank"); 13 return false; 14 } else if (this.player_exists(name)) { 15 this.set_error("Player already exists"); 16 return false; 17 } else { 18 return true; 19 } 20 }, 21 player_exists: function(name) { 22 return Players.findOne({ 23 name: name 24 }); 25 } 26 };
在插入用户前需要验证，即将验证放在“Add Player ”点击事件上：
1 Template.new_player.events = { 2 'click input.addPlayer': function() { 3 var newPlayerName = document.getElementById('new_player_name').value.trim(); 4 5 if (Validation.valid_name(newPlayerName)) { 6 Players.insert({ 7 name: newPlayerName, 8 score: 0 9 }); 10 }; 11 } 12 };注意：在验证之前，用户名先清除多余空格。
我认为这已经够了。
我晚些会更新这篇文章，添加更多特性，并且寻找javascript最佳实践。
原文：http://danneu.com/posts/6-meteor-tutorial-for-fellow-noobs-adding-features-to-the-leaderboard-demo/
转载于:https://www.cnblogs.com/zhining/p/Meteor%e5%85%a5%e9%97%a8.html
相关资源：数据结构—成绩单生成器