警報和錯誤

警報和錯誤幾乎是所有 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 會話變數，你的應用程式將被動地顯示警報和錯誤訊息！ :)