meteor
Blaze-Benutzeroberflächenrezepte (Bootstrap; keine jQuery)

Bemerkungen

Dropdown-Menü

Im folgenden Beispiel wird ein Bootstrap-Dropdown-Menü erstellt, das nur Blaze und kein JQuery verwendet.

Dokumentobjektmodell

    <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

Eine sehr häufige Aufgabe ist das Erstellen von responsiven Navigationsleisten und das Erstellen von Aktions- / Fußzeilen mit unterschiedlichen Steuerelementen, je nachdem, auf welcher Seite sich ein Benutzer befindet oder zu welcher Rolle ein Benutzer gehört. Lass uns überlegen, wie man diese Kontrollen macht.

Router

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

Erstellen Sie eine Navbar-Vorlage

<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>

Definieren Sie die Erträge im Layout

<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>

Modals

Dies ist ein reiner Blaze-Ansatz, um Elemente der Benutzeroberfläche in die Existenz hinein und aus ihr heraus zu bewegen. Stellen Sie sich dies als Ersatz für modale Dialoge vor. Tatsächlich gibt es mehrere Möglichkeiten, um modale Dialoge mit dieser Methode zu implementieren (fügen Sie einfach Hintergrundmasken und Animationen hinzu).

Dokumentobjektmodell

<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;
  }
}

Tagging

Die Datenbankebene Zunächst wollen wir das Data Distribution Protocol einrichten, um sicherzustellen, dass Daten in der Datenbank gespeichert werden können und diese dem Client zur Verfügung stehen. Es müssen drei Dateien erstellt werden ... eine auf dem Server, eine auf dem Client und eine, die von beiden gemeinsam genutzt wird.

// 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();
});

In diesem Beispiel wird das folgende Dokumentschema für das Tagging-Muster angenommen:

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

Dokumentobjektmodell
Zweitens möchten wir unser Objektmodell in der Anwendungsebene erstellen. Im Folgenden wird beschrieben, wie Sie ein Bootstrap-Bedienfeld verwenden, um einen Beitrag mit Titel, Text und Tags zu rendern. Beachten Sie, dass selectedPost , tagObjects und tag alle Hilfsfunktionen der blogPost-Vorlage sind. title und text sind Felder aus unserem Dokumentensatz.

<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
Als Nächstes möchten wir einige Controller so einrichten, dass sie Daten zurückgeben, Dateneingaben implementieren und so weiter.

// 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}});
    }
});

Styling
Schließlich möchten wir einige unterschiedliche Ansichten für Telefone, Tablets und Desktops definieren. und einige grundlegende UI-Gestaltung je nach Benutzereingabe. In diesem Beispiel wird der Precompiler Less verwendet, obwohl die Syntax für Sass und Stylus ungefähr gleich sein sollte.

// 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;
    }
  }
}

Alarme und Fehler

Alarme und Fehler sind fast die einfachsten Muster von Meteor-Komponenten. Sie sind so einfach, dass sie sich kaum als Muster in sich registrieren. Anstatt FlashAlert-Module oder -Muster hinzuzufügen, müssen Sie lediglich eine entsprechende Handlebar-Vorlage formatieren, einen Helper hinzufügen und diese mit einer reaktiven Session-Variablen verbinden.

Voraussetzungen
Für den folgenden Code sind der LESS-Precompiler bzw. Bootstrap-3 erforderlich. Sie müssen die folgenden Befehle an der Eingabeaufforderung ausführen, damit sie funktionieren.

meteor add less
meteor add ian:bootstrap-3 

Dokumentobjektmodell: Definieren des Warnungsobjekts Beginnen Sie mit dem Hinzufügen einiger Elemente zu Ihrem Dokumentobjektmodell. In diesem Fall möchten wir ein div-Element für unsere Warnung erstellen, das mit zwei Handlebar-Helfern verbunden ist.

<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: Vorlagenhelfer definieren Dann möchten wir einige Controller miteinander verbinden, die das Objektmodell mit Daten füllen. Wir machen dies mit zwei reaktiven Sitzungsvariablen und zwei Lenkerhelfern.

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');
}

Styling: Definieren der DOM-Sichtbarkeit Anschließend möchten wir zu unserem CSS zurückkehren und zwei Ansichten des postsPage-Elements definieren. In der ersten Ansicht zeigen wir alle Inhalte in unserem Objektmodell. In der zweiten Ansicht werden nur einige Inhalte unseres Objektmodells angezeigt.

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

Javascript: Alarm auslösen
Zum Schluss kehren wir zu unseren Controllern zurück und definieren einen Event-Controller, der beim Anklicken unsere Warnung auslöst.

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

Und das ist alles was dazu gehört! Super einfach, richtig? Jetzt können alertMessage Sitzungsvariablen alertLevel und alertMessage beliebigen Stelle in Ihrer Codebase alertMessage Ihrer Anwendung werden Alarme und Fehlermeldungen reaktiv alertMessage :)

Workflow mit Registern

Dokumentobjektmodell
Beginnen Sie mit der Erstellung Ihrer Registerkarten und Bereiche in Ihrem Objektmodell ...

<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";
    }
  }
});

Styling

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

Aktive Registerkarte Für einen zusätzlichen Effekt können Sie dieses Muster erweitern, indem Sie Klassen einfügen, um die aktive Registerkarte anzuzeigen.

<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 "";
    }
  },
});