meteor
Blazeユーザーインターフェイスレシピ（ブートストラップ、jQueryなし）

備考

ドロップダウンメニュー

次の例では、Blazeのみを使用し、JQueryを使用しないブートストラップ・ドロップダウン・メニューを作成します。

ドキュメントオブジェクトモデル

    <nav class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{getSelectedValue}} <span class="glyphicon glyphicon-user pull-right"></span></a>
        <ul class="fullwidth dropdown-menu">
          <li id="firstOption" class="fullwidth"><a href="#">15 Minutes <span class="glyphicon glyphicon-cog pull-right"></span></a></li>
          <li class="divider"></li>
          <li id="secondOption"><a href="#">30 Minutes <span class="glyphicon glyphicon-stats pull-right"></span></a></li>
          <li class="divider"></li>
          <li id="thirdOption"><a href="#">1 Hour <span class="badge pull-right"> 42 </span></a></li>
          <li class="divider"></li>
          <li id="fourthOption"><a href="#">4 Hour <span class="glyphicon glyphicon-heart pull-right"></span></a></li>
          <li class="divider"></li>
          <li id="fifthOption"><a href="#">8 Hours <span class="glyphicon glyphicon-log-out pull-right"></span></a></li>
        </ul>
      </li>
    </nav>

Javascript

Template.examplePage.helpers({
  getSelectedValue:function(){
    return Session.get('selectedValue');
  }
});
Template.dropDownWidgetName.events({
  'click #firstOption':function(){
    Session.set('selectedValue', 1);
  },
  'click #secondOption':function(){
    Session.set('selectedValue', "blue");
  },
  'click #thirdOption':function(){
    Session.set('selectedValue', $('#thirdOption').innerText);
  },
  'click #fourthOption':function(){
    Session.set('selectedValue', Session.get('otherValue'));
  },
  'click #fifthOption':function(){
    Session.set('selectedValue', Posts.findOne(Session.get('selectedPostId')).title);
  },
});

Navbars

非常に一般的な作業は、応答のあるナビゲーションバーを作成し、ユーザーがどのページにいるか、ユーザーがどのロールに属しているかに基づいて異なるコントロールを持つアクション/フッターバーを作成することです。これらのコントロールを行う方法を説明しましょう。

ルーター

Router.configure({
  layoutTemplate: 'appLayout',
});
Router.route('checklistPage', {
    path: '/lists/:_id',
    onBeforeAction: function() {
      Session.set('selectedListId', this.params._id);
      this.next();
    },
    yieldTemplates: {
      'navbarFooter': {
        to: 'footer'
      }
    }
  });

Navbarテンプレートを作成する

<template name="navbarFooter">
  <nav id="navbarFooterNav" class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <ul class="nav navbar-nav">
      <li><a id="addPostLink"><u>A</u>dd Post</a></li>         
      <li><a id="editPostLink"><u>E</u>dit Post</a></li>          
      <li><a id="deletePostLink"><u>D</u>elete Post</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">       
      <li><a id="helpLink"><u>H</u>elp</a></li>
    </ul>
  </nav>
</template>

レイアウトの歩留まりを定義する

<template name="appLayout">
  <div id="appLayout">
    <header id="navbarHeader">
      {{> yield 'header'}}     
    </header>

      <div id="mainPanel">
        {{> yield}}
      </div>

    <footer id="navbarFooter" class="{{getTheme}}"">
      {{> yield 'footerActionElements' }}
    </footer>
  </div>
</template>

モーダル

このようにして、UIエレメントを存在の有無に応じて切り替えることができます。これをモーダルダイアログの代わりに考えることができます。実際、このメソッドを使用してモーダルダイアログを実装する方法はいくつかあります（バックグラウンドマスクとアニメーションを追加するだけです）。

ドキュメントオブジェクトモデル

<template name="topicsPage">
  <div id="topicsPage" class="container">
    <div class="panel">
      <div class="panel-heading">
        Nifty Panel
      </div>
      <!-- .... -->
      <div class="panel-footer">
        <!-- step 1.  we click on the button object -->
        <div id="createTopicButton" class="btn {{ getPreferredButtonTheme }}">Create Topic</div>
      </div>
    </div>

    <!-- step 5 - the handlebars gets activated by the javascript controller -->
    <!-- and toggle the creation of new objects in our model -->
    {{#if creatingNewTopic }}
    <div>
      <label for="topicTextInput"></label>
      <input id="topicTextInput" value="enter some text..."></input>
      <button class="btn btn-warning">Cancel</button>
      <button class="btn btn-success">OK</button>
    </div>
    {{/if}}
  </div>
</template>

Javascript

// step 2 - the button object triggers an event in the controller
// which toggles our reactive session variable
Template.topicsPage.events({
  'click #createTopicButton':function(){
    if(Session.get('is_creating_new topic'){
      Session.set('is_creating_new_topic', false);
    }else{
      Session.set('is_creating_new_topic', true);
    }
  }
});

// step 0 - the reactive session variable is set false
Session.setDefault('is_creating_new_topic', false);

// step 4 - the reactive session variable invalidates
// causing the creatNewTopic function to be rerun
Template.topicsPage.creatingNewTopic = function(){
  if(Session.get('is_creating_new_topic')){
    return true;
  }else{
    return false;
  }
}

タグ付け

データベース層まず、データをデータベースに保存してクライアントに渡すことができるように、データ配布プロトコルを設定します。 3つのファイルを作成する必要があります.1つはサーバー上、1つはクライアント上、もう1つは両方の間で共有されます。

// client/subscriptions.js
Meteor.subscribe('posts');

//lib/model.js
Posts  = new Meteor.Collection("posts");
Posts.allow({
    insert: function(){
        return true;
    },
    update: function () {
        return true;
    },
    remove: function(){
        return true;
    }
});


// server.publications.js
Meteor.publish('posts', function () {
  return Posts.find();
});

この例では、タグ付けパターン用の次のドキュメントスキーマを想定しています。

{
  _id: "3xHCsDexdPHN6vt7P",
  title: "Sample Title",
  text: "Lorem ipsum, solar et...",
  tags: ["foo", "bar", "zkrk", "squee"]
}

ドキュメントオブジェクトモデル
次に、アプリケーション層にオブジェクトモデルを作成します。次に、ブートストラップパネルを使用して、タイトル、テキスト、およびタグを含む投稿をレンダリングする方法を示します。 selectedPost 、 tagObjects 、およびtagは、すべてblogPostテンプレートのヘルパー関数です。 titleとtextは文書レコードのフィールドです。

<template name="blogPost">
  {{#with selectedPost }}
    <div class="blogPost panel panel-default">
      <div class="panel-heading">
        {{ title }}
      </div>
        {{ text }}
      <div class="panel-footer">
        <ul class="horizontal-tags">
          {{#each tagObjects }}
          <li class="tag removable_tag">
            <div class="name">{{tag}}<i class="fa fa-times"></i></div>
          </li>
          {{/each}}
          <li class="tag edittag">
            <input type="text" id="edittag-input" value="" /><i class="fa fa-plus"></i>
          </li>
        </ul>
      </div>
    </div>
  {{/with}}
</template>

Javascript
次に、いくつかのコントローラをセットアップして、データを返すようにしたり、データ入力を実装したりしたいと考えています。

// you will need to set the selectedPostId session variable 
// somewhere else in your application
Template.blogPost.selectedPost = function(){
  return Posts.findOne({_id: Session.get('selectedPostId')});
}

// next, we use the _.map() function to read the array from our record
// and convert it into an array of objects that Handlebars/Spacebars can parse
Template.blogPost.tagObjects = function () {
    var post_id = this._id;
    return _.map(this.tags || [], function (tag) {
        return {post_id: post_id, tag: tag};
    });
};

// then we wire up click events 
Template.blogPost.events({
    'click .fa-plus': function (evt, tmpl) {
        Posts.update(this._id, {$addToSet: {tags: value}});
    },
    'click .fa-times': function (evt) {
        Posts.update({_id: this._id}, {$pull: {tags: this.tag}});
    }
});

スタイリング
最後に、電話、タブレット、およびデスクトップ向けにいくつかの異なるビューを定義したいと考えています。ユーザーの入力に応じていくつかの基本的なUIスタイルがあります。この例では、Lessプリコンパイラを使用していますが、構文はSassとStylusでほぼ同じにする必要があります。

// default desktop view
.fa-plus:hover{
  cursor: pointer;
}
.fa-times:hover{
  cursor: pointer;
}
// landscape orientation view for tablets
@media only screen and (min-width: 768px) {
  .blogPost{
     padding: 20px;
  }
}
// portrait orientation view for tablets
@media only screen and (max-width: 768px) {
  .blogPost{
     padding: 0px;
       border: 0px;
  }
}
// phone view
@media only screen and (max-width: 480px) {
  blogPost{
   .panel-footer{
       display: none;
    }
  }
}

警告とエラー

アラートとエラーは、ほぼすべてのMeteorコンポーネントパターンの中で最もシンプルです。彼らはそれほどシンプルで、実際には自分自身のパターンとして登録していません。 FlashAlertのモジュールやパターンを追加するのではなく、本当に必要なのは、Handlebarテンプレートを適切にスタイルし、ヘルパーを追加して、それを反応的なSession変数に配線するだけです。

前提条件
以下のコードでは、それぞれLESSプリコンパイラとBootstrap-3が必要です。コマンドプロンプトで次のコマンドを実行する必要があります。

meteor add less
meteor add ian:bootstrap-3 

ドキュメントオブジェクトモデル：アラートオブジェクトの定義まず 、ドキュメントオブジェクトモデルにいくつかの要素を追加します。この場合、アラート用のdiv要素を作成する必要があります。これは、ハンドルバーヘルパー2個まで配線されています。

<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：Templateヘルパーを定義する次に 、オブジェクトモデルにデータを取り込むいくつかのコントローラを結びつけたいと思います。 2つのリアクティブセッション変数と2つのハンドルバーヘルパーを使用しています。

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要素の2つのビューを定義します。最初のビューでは、すべてのコンテンツをオブジェクトモデルに表示します。 2番目のビューでは、オブジェクトモデルの内容の一部のみが表示されます。

#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セッション変数をコードベースのどこにでも設定できるようになり、アプリケーションは反応的に警告とエラーメッセージを表示します。 :)

タブ付きワークフロー

ドキュメントオブジェクトモデル
まず、オブジェクトモデルでタブとペインを作成します。

<template name="samplePage">
  <div id="samplePage" class="page">
    <ul class="nav nav-tabs">
      <li id="firstPanelTab"><a href="#firstPanel">First</a></li>
      <li id="secondPanelTab"><a href="#secondPanel">Second</a></li>
    </ul>

    <div id="firstPanel" class="{{firstPanelVisibility}}">
      {{> firstPanel }}
    </div>
    <div id="secondPanel" class="{{secondPanelVisibility}}">
      {{> secondPanel }}
    </div>
  </div>
</template>

Javascript

// this variable controls which tab is displayed and associated application state
Session.setDefault('selectedPanel', 1);

Template.name.helpers({
  firstPanelVisibility: function (){
    if(Session.get('selectedPanel') === 1){
      return "visible";
    }else{
      return "hidden";
    }
  },
  secondPanelVisibility: function (){
    if(Session.get('selectedPanel') === 2){
      return "visible";
    }else{
      return "hidden";
    }
  },
  thirdPanelVisibility: function (){
    if(Session.get('selectedPanel') === 3){
      return "visible";
    }else{
      return "hidden";
    }
  },
  firstPanelActive: function (){
    if(Session.get('selectedPanel') === 1){
      return "active panel-tab";
    }else{
      return "panel-tab";
    }
  },
  secondPanelActive: function (){
    if(Session.get('selectedPanel') === 2){
      return "active panel-tab";
    }else{
      return "panel-tab";
    }
  },
  thirdPanelActive: function (){
    if(Session.get('selectedPanel') === 3){
      return "active panel-tab";
    }else{
      return "panel-tab";
    }
  }
});

スタイリング

.visible {
  display: block;
  visibility: visible;
}
.hidden {
  display: none;
  visibility: hidden;
}

アクティブなタブ追加された効果のために、アクティブなタブを示すためにクラスを注入することによって、このパターンを拡張することができます。

<li id="firstPanelTab" class="{{firstPanelActive}}"><a href="#firstPanel">First</a></li>
<li id="secondPanelTab" class="{{secondPanelActive}}"><a href="#secondPanel">Second</a></li>

Template.firstPanel.helpers({
  firstPanelActive: function (){
    if(Session.get('selectedPanel') === 1){
      return "active";
    }else{
      return "";
    }
  },
  secondPanelActive: function (){
    if(Session.get('selectedPanel') === 2){
      return "active";
    }else{
      return "";
    }
  },
});