meteor
Blaze User Interface Recepten (Bootstrap; No jQuery)

Opmerkingen

Drop-down menu

In het volgende voorbeeld wordt een vervolgkeuzemenu Bootstrap gemaakt met alleen Blaze en geen JQuery.

Document Object Model

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

navigatiebalken

Een veel voorkomende taak is het maken van responsieve navigatiebalken en het maken van actie- / voettekstbalken met verschillende bedieningselementen op basis van de pagina waarop een gebruiker zich bevindt of tot welke rol een gebruiker behoort. Laten we eens kijken hoe we deze bedieningselementen kunnen maken.

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

Maak een Navbar-sjabloon

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

Definieer opbrengsten in de lay-out

<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

Deze opvolger is een pure Blaze-benadering om UI-elementen in en uit het bestaan te schakelen. Zie dit als een vervanging voor modale dialogen. Er zijn in feite een aantal manieren om modale dialoogvensters te implementeren met behulp van deze methode (voeg eenvoudig achtergrondmaskers en animaties toe).

Document Object Model

<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

De databaselaag Eerst willen we het datadistributieprotocol instellen, om ervoor te zorgen dat we gegevens in de database kunnen bewaren en naar de client kunnen brengen. Er moeten drie bestanden worden gemaakt ... één op de server, één op de client en één gedeeld tussen beide.

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

Dit voorbeeld gaat uit van het volgende documentschema voor het taggingpatroon:

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

Document Object Model
Ten tweede willen we ons objectmodel in de applicatielaag maken. Het volgende is hoe je een Bootstrap-paneel zou gebruiken om een bericht met titel, tekst en tags weer te geven. Let op: selectedPost , tagObjects en tag zijn allemaal helpfuncties van de blogPost-sjabloon. title en text zijn velden uit ons documentrecord.

<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
Vervolgens willen we enkele controllers instellen om gegevens te retourneren, gegevensinvoer te implementeren, enzovoort.

// 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
Ten slotte willen we enkele verschillende weergaven definiëren voor telefoon, tablet en desktops; en enige elementaire UI-stijl afhankelijk van gebruikersinvoer. In dit voorbeeld wordt de precompiler Less gebruikt, hoewel de syntaxis ongeveer hetzelfde moet zijn voor Sass en 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;
    }
  }
}

Waarschuwingen en fouten

Waarschuwingen en fouten zijn bijna de eenvoudigste van alle Meteor-componentpatronen. Ze zijn zelfs zo eenvoudig dat ze zich nauwelijks als een patroon van zichzelf registreren. In plaats van FlashAlert-modules of -patronen toe te voegen, hoeft u alleen maar een passende stuursjabloon te stylen, een helper toe te voegen en deze aan te sluiten op een reactieve sessievariabele.

voorwaarden
De volgende code vereist respectievelijk de MINDER precompiler en Bootstrap-3. U moet de volgende opdrachten uitvoeren vanaf de opdrachtprompt om ze te laten werken.

meteor add less
meteor add ian:bootstrap-3 

Documentobjectmodel: definieer waarschuwingsobject Begin door enkele elementen aan uw documentobjectmodel toe te voegen. In dit geval willen we een div-element voor onze melding maken, dat is aangesloten op maximaal twee stuurhulpen.

<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: sjabloonhelpers definiëren Vervolgens willen we enkele controllers aansluiten die het objectmodel met gegevens zullen vullen. We doen dit met twee reactieve sessievariabelen en twee stuurhulp.

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: DOM-zichtbaarheid definiëren Vervolgens willen we teruggaan naar onze CSS en twee weergaven van het postsPage-element definiëren. In de eerste weergave tonen we alle inhoud in ons objectmodel. In de tweede weergave wordt slechts een deel van de inhoud van ons objectmodel weergegeven.

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

Javascript: de waarschuwing activeren
Ten slotte gaan we terug naar onze controllers en definiëren we een eventcontroller die onze waarschuwing activeert wanneer erop wordt geklikt.

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

En dat is alles wat er is! Super simpel toch? U kunt nu de alertLevel en alertMessage overal in uw codebase instellen en uw toepassing zal reactief waarschuwingen en foutmeldingen weergeven! :)

Werkstroom met tabbladen

Document Object Model
Begin met het maken van uw tabbladen en deelvensters in uw objectmodel ...

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

Actief tabblad Voor extra effect kunt u dit patroon uitbreiden door klassen te injecteren om het actieve tabblad aan te geven.

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