【译】Meteor 新手教程：在排行榜上添加新特性

原文：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.chunk
• Meteor.autosubscribe
• Templates

 

(2)更新的数据源会触发如下变化：

• Session variables
• Database queries on Collections
• Meteor.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");
};

  

使用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 对象的定义：

 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