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

时间：2021-06-05 18:57:32

原文：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

一、添加用户的表单

我会写一个简单的表单用来添加新用户

【译】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 注意变量去通知错误信息的更新

二、移除用户

界面就像这个样子

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

我们把按钮添加在 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． 不存在集合（数据库）中

当验证失败时，错误信息会显示在输入框前：

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

添加错误信息进 “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/

相关文章