Meteor 错误

误。所以我们现在使用“笨”CSS 动画，我们把比较炫丽的东西留在以后的动画章节。这可以工作了，但是如果你要触发多个错误（比如，通过提交三次同一个连接），你会看到错误信息会堆叠在一起。这是因为虽然 .alert 元素在视觉上消失了，但仍存留在 DOM 中。我们需要修正这个问题。这正是 Meteor 发光的情形。由于 Errors 集合是响应性的，我们要做的就是将旧的错误从集合中删除！我们用 Meteor.setTimeout 指定在一定时间（当前情形，3000毫秒）后执行一个回调函数。Template.errors.helpers({ errors: function() { return Errors.find(); }});Template.error.onRendered(function() { var error = this.data; Meteor.setTimeout(function () { Errors.remove(error._id); }, 3000);});一旦模板在浏览器中渲染完毕，onRendered 回调函数被触发。其中，this 是指当前模板实例，而 this.data 是当前被渲染的对象的数据（这种情况下是，一个错误）。寻求验证到现在为止，我们还没有对表单进行任何验证。至少，我们想让用户为新帖子提供 URL 和标题。那么我们确保他们这么做。我们要做两件事：第一，我们给任何有问题的表单字段的父 div 标签一个特别的 has-error CSS class。第二，我们在字段下方显示一个有用的错误消息。首先，我们要准备 postSubmit 模板来包含这些新 helper：<template name="postSubmit"> <form class="main form"> <div class="form-group {{errorClass 'url'}}"> <label class="control-label" for="url">URL</label> <div class="controls"> <input name="url" id="url" type="text" value="" placeholder="Your URL" class="form-control"/> <span class="help-block">{{errorMessage 'url'}}</span> </div> </div> <div class="form-group {{errorClass 'title'}}"> <label class="control-label" for="title">Title</label> <div class="controls"> <input name="title" id="title" type="text" value="" placeholder="Name your post" class="form-control"/> <span class="help-block">{{errorMessage 'title'}}</span> </div> </div> <input type="submit" value="Submit" class="btn btn-primary"/> </form></template>注意我们传递参数（分别是 url 和 title）到每个 helper。这让我们两次重复使用同一个 helper，基于参数修改它的行为。现在到了有趣的部分：使这些 helper 真正做点什么事情。我们会用会话 Session 去存储包含任何潜在错误的 postSubmitErrors 对象。当用户使用表单时，这个对象会改变，也就是响应性地更新表单代码和内容。首先，当 postSubmit 模板被创建时，我们初始化对象。这确保用户不会看到上次访问该页面时遗留下的旧的错误消息。然后定义我们的两个模板 helper，紧盯 Session.get('postSubmitErrors') 的 field 属性（field 指 url 或 title 取决于我们如何调用 helper）。errorMessage 只是返回消息本身，而 errorClass 检查消息是否存在，如果为真返回 has-error。Template.postSubmit.onCreated(function() { Session.set('postSubmitErrors', {});});Template.postSubmit.helpers({ errorMessage: function(field) { return Session.get('postSubmitErrors')[field]; }, errorClass: function (field) { return !!Session.get('postSubmitErrors')[field] ? 'has-error' : ''; }});//...你可以测试 helper 是否工作正常，打开浏览器控制台并输入以下代码：Session.set('postSubmitErrors', {title: 'Warning! Intruder detected. Now releasing robo-dogs.'});下一步将 postSubmitErrors Session 会话对象绑在表单上。开始之前，我们在 posts.js 中添加一个新的 validatePost 函数来监视 post 对象，返回一个包含任何错误相关消息的（即，title 或 url 字段是否未填写）errors 对象：//...validatePost = function (post) { var errors = {}; if (!post.title) errors.title = "请填写标题"; if (!post.url) errors.url = "请填写 URL"; return errors;}//...我们通过 postSubmit 事件 helper 去调用这个函数：Template.postSubmit.events({ 'submit form': function(e) { e.preventDefault(); var post = { url: $(e.target).find('[name=url]').val(), title: $(e.target).find('[name=title]').val() }; var errors = validatePost(post); if (errors.title || errors.url) return Session.set('postSubmitErrors', errors); Meteor.call('postInsert', post, function(error, result) { // 向用户显示错误信息并终止 if (error) return throwError(error.reason); // 显示这个结果且继续跳转 if (result.postExists) throwError('This link has already been posted'); Router.go('postPage', {_id: result._id}); }); }});注意如果出现任何错误，我们用 return 终止 helper 执行，而不是我们要实际地返回这个值。服务器端验证我们还没有完成。我们在客户端验证 URL 和标题是否存在，但是在服务器端呢？毕竟，还会有人仍然尝试通过浏览器控制台输入一个空帖子来手动调用 postInsert 方法。即使我们不需要在服务器端显示任何错误消息，但是我们依然要利用好那个 validatePost 函数。除了这次我们在 postInsert 方法内调用它，而不只是在事件 helper：Meteor.methods({ postInsert: function(postAttributes) { check(this.userId, String); check(postAttributes, { title: String, url: String }); var errors = validatePost(postAttributes); if (errors.title || errors.url) throw new Meteor.Error('invalid-post', "你必须为你的帖子填写标题和 URL"); var postWithSameLink = Posts.findOne({url: postAttributes.url}); if (postWithSameLink) { return { postExists: true, _id: postWithSameLink._id } } var user = Meteor.user(); var post = _.extend(postAttributes, { userId: user._id, author: user.username, submitted: new Date() }); var pos