原文: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/

【译】Meteor 新手教程:在排行榜上添加新特性的更多相关文章

  1. Linux上添加新硬盘的实例介绍

    在Linux上添加新硬盘的实例讲解,有需要的朋友可以看看. 系统:Redhat AS3 UP3硬盘:scsi注意:# 表示是root用户执行的命令 [root@cncmail data1]# fdis ...

  2. [转]Magento2开发教程 - 如何向数据库添加新表

    本文转自:https://www.cnblogs.com/xz-src/p/6920365.html Magento 2具有特殊的机制,允许你创建数据库表,修改现有的,甚至添加一些数据到他们(如安装数 ...

  3. Magento2开发教程 - 如何向数据库添加新表

    Magento 2具有特殊的机制,允许你创建数据库表,修改现有的,甚至添加一些数据到他们(如安装数据,已被添加在模块安装). 这种机制允许这些变化可以在不同的设备之间传输. 关键的概念是,而不是做你能 ...

  4. [译].Net 4.5 的五项强大新特性

    本文原文:Five Great .NET Framework 4.5 Features 译者:冰河魔法师 目录 介绍 特性一:async和await 特性二:Zip压缩 特性三:正则表达式执行超时 特 ...

  5. ASP.NET 5系列教程 (一):领读新特性

    近期微软发布了ASP.NET 5.0,本次发布的新特性需求源于大量用户的反馈和需求,例如灵活的跨平台运行时和自主部署能力使ASP.NET应用不再受限于IIS.Cloud-ready环境配置降低了云端部 ...

  6. 前端笔记之HTML5&amp;CSS3(上)新特性&amp;音频视频&amp;本地存储&amp;自定义属性

    一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...

  7. 【译】Unity3D Shader 新手教程(6/6) &mdash;&mdash; 更好的卡通Shader

    本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 动机 如果你想了解以下几件事,我建议你阅读以下这篇教程: 想知道如何写一个multipass的toon shade ...

  8. SQL Server 分区表上建立ColumnStore Index 如何添加新分区方法与步骤

    在生产环境中会遇到这样的场景,一个表随着时间的推移,越来越大,这个时候我们开始动手为这个表建立分区来改进查询性能. 但是表过大上百个G的时候,在数据仓库中,为了改进查询性能,我们可以添加在分区表的基础 ...

  9. 线上nginx 平滑添加新模块;如(--with-http_realip_module)

    nginx 添加模块1.查看当前nginx信息(配置文件路径,启动用户...) ps aux | grep nginx 2.查看当前nginx已启用的模块(记录模块信息,安装路径)./nginx -V ...

随机推荐

  1. .net中的反射(转载)

    原文地址:http://www.cnblogs.com/Stephenchao/p/4481995.html 两个现实中的例子:1.B超:大家体检的时候大概都做过B超吧,B超可以透过肚皮探测到你内脏的 ...

  2. Win7 系统下 Firefox hostadmin插件无法修改Host

    问题:  win 7系统,今天用杀毒软件杀了一下毒,firefox hostAdmin插件无法修改Host了,提示“ write hosts file failed check permissions ...

  3. HDU 4287 Intelligent IME(字典树数组版)

    Intelligent IME Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  4. 解决HP打印机错误:Couldn&#39;t open fifo

    我的是因为选错了打印机协议,一开始选成了“互联网打印协议 - IPP”. 解决方案:删除原有打印机配置,重新选择协议为“HP Jetdirect-Socket”即可.

  5. [原创]Devexpress XtraReports 系列 7 创建Drill-Down(向下钻取)报表

    昨天发表了Devexpress XtraReports系列第六篇[原创]Devexpress XtraReports 系列 6 创建并排报表,今天我们继续. 今天的主题是创建Drill-Down报表. ...

  6. 新手学习数据库(一)用Powerdesigner设计数据库

    说明: 一.学会用开发语言进行数据库编程,其关键是在于学会sql语言,开发语言只不过给程序员提供了一个操作数据库的接口罢了. 二. 本人也是初学者,采用的数据库设计软件是powerdesigner.利 ...

  7. 剑指offer 25 二叉树中和为某一值的路径

    非递归方法: class Solution { public: vector<vector<int>> FindPath(TreeNode* root,int expectNu ...

  8. C# RichTextBox 滚动条 滚动到最新行

    richTextBox.Select(richTextBox.TextLength, 0); richTextBox.ScrollToCaret();

  9. 一维信号频谱图仿真——matlab

    程序1: %在MATLAB中是用连续信号在等时间间隔点的样值来近似地表示连续信号的,当采样时间间隔足够小时,这些离散的采样值就能较好地近似出连续信号,matlab中连续信号的显示实际上还是离散信号的显 ...

  10. Maven 项目 查找指定包的引用位置