警报和错误

警报和错误几乎是所有 Meteor 组件模式中最简单的。事实上，它们是如此简单，以至于它们本身几乎没有注册成为一种模式。你需要做的就是设置一个适当的 Handlebar 模板，添加一个帮助程序，然后将其连接到一个被动的 Session 变量，而不是添加 FlashAlert 模块或模式。

先决条件
以下代码分别需要 LESS 预编译器和 Bootstrap-3。你需要在命令提示符下运行以下命令才能使它们正常工作。

meteor add less
meteor add ian:bootstrap-3 

文档对象模型：定义警报对象首先，在文档对象模型中添加一些元素。在这种情况下，我们想为我们的警报创建一个 div 元素，它连接到两个 Handlebar 助手。

<template name="postsPage">
  <div id="postsPage" class="page">
    <div id="postsPageAlert" class="{{alertColor}}">{{alertMessage}}</div>
    <div class="postsList">
      <!-- other code you can ignore in this example -->
    </div>
    <div id="triggerAlertButton" class="btn btn-default">
  </div>
</template>

Javascript：定义模板助手然后我们想要连接一些控制器，这些控制器将使用数据填充对象模型。我们这样做有两个反应会话变量和两个车把助手。

Session.setDefault('alertLevel', false);
Session.setDefault('alertMessage', "");

Template.postsPage.alertColor = function(){
 if(Session.get('alertLevel') == "Success"){
  return "alert alert-success";
 }else if(Session.get('alertLevel') == "Info"){
  return "alert alert-info";
 }else if(Session.get('alertLevel') == "Warning"){
  return "alert alert-warning";
 }else if(Session.get('alertLevel') == "Danger"){
  return "alert alert-danger";
 }else{
  return "alert alert-hidden"
 }
}

Template.postsPage.alertMessage = function(){
  return Session.get('alertMessage');
}

样式：定义 DOM 可见性然后我们想回到我们的 CSS，并定义 postsPage 元素的两个视图。在第一个视图中，我们显示对象模型中的所有内容。在第二个视图中，仅显示对象模型的一些内容。

#postsPage{
  .alert{
    display: block;
  }
  .alert-hidden{
    display: none;
  }
}

Javascript：触发警报
最后，我们回到我们的控制器，我们定义一个事件控制器，它会在点击时触发我们的警报。

Template.postsPage.events({
  'click #triggerAlertButton':function(){
    Session.set('alertLevel', 'Success');
    Session.set('alertMessage', 'You successfully read this important alert message.');
  }
});

这就是它的全部！ 超级简单吧？你现在可以在代码库中的任何位置设置 alertLevel 和 alertMessage 会话变量，你的应用程序将被动地显示警报和错误消息！ :)