Sök…
Anmärkningar
Ovanstående Blaze-exempel är mycket kompatibla med http://bootsnipp.com/ -biblioteket, som endast tillhandahåller HTML och CSS för komponenter, och lämnar javascript upp till utvecklaren. Detta gör det möjligt för komponenter att dela samma underliggande sorterings-, filtrerings-, fråga- och markörmetoder.
Rullgardinsmenyn
Följande exempel skapar en rullgardinsmeny med Bootstrap, som bara använder Blaze och ingen JQuery.
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
En mycket vanlig uppgift är att skapa lyhörda navlar och att skapa action / sidfält som har olika kontroller baserat på vilken sida en användare är på eller vilken roll en användare tillhör. Låt oss gå igenom hur man gör dessa kontroller.
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'
}
}
});
Skapa en Navbar-mall
<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>
Definiera avkastning i layouten
<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
Denna efterföljning är en ren-Blaze-strategi för att växla UI-element till och utanför existensen. Tänk på detta som en ersättning för modala dialoger. Det finns faktiskt ett antal sätt att implementera modala dialogrutor med den här metoden (lägg bara till bakgrundsmasker och animationer).
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;
}
}
tagg~~POS=TRUNC
Databaslagret Först vill vi konfigurera datadistributionsprotokollet, för att se till att vi kan fortsätta data till databasen och få dem till klienten. Tre filer måste skapas ... en på servern, en på klienten och en delad mellan båda.
// 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();
});
Detta exempel antar följande dokumentschema för taggmönstret:
{
_id: "3xHCsDexdPHN6vt7P",
title: "Sample Title",
text: "Lorem ipsum, solar et...",
tags: ["foo", "bar", "zkrk", "squee"]
}
Dokumentobjektmodell
För det andra vill vi skapa vår objektmodell i applikationsskiktet. Följande är hur du använder en Bootstrap-panel för att göra ett inlägg med titel, text och taggar. Observera att selectedPost tagObjects , tagObjects och tag är alla hjälpfunktioner i bloggpostmallen. title och text är fält från vår dokumentrekord.
<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
Därefter vill vi ställa in några kontroller för att returnera data, implementera viss dataingång och så vidare.
// 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
Slutligen vill vi definiera några olika vyer för telefon, surfplatta och stationära datorer; och viss grundläggande UI-styling beroende på användarinmatning. Detta exempel använder Less-förkompileraren, även om syntaxen bör vara ungefär densamma för Sass och 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;
}
}
}
Varningar och fel
Varningar och fel är nästan det enklaste av alla Meteor-komponentmönster. De är faktiskt så enkla att de knappt registrerar sig som ett mönster i sig själva. Istället för att lägga till FlashAlert-moduler eller -mönster, behöver du bara utforma en handtagsmall lämplig, lägga till en hjälpare och koppla upp den till en reaktiv sessionvariabel.
förutsättningar
Följande kod kräver LESS-förkompileraren respektive Bootstrap-3. Du måste köra följande kommandon vid kommandotolken för att få dem att fungera.
meteor add less
meteor add ian:bootstrap-3
Dokumentobjektmodell: Definiera varningsobjekt Börja med att lägga till några element i din dokumentobjektmodell. I det här fallet vill vi skapa ett div-element för vår varning, som är uppkopplad till två styrtagare.
<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: Definiera mallhjälpare Då vill vi koppla upp några kontroller som kommer att fylla objektmodellen med data. Det gör vi med två reaktiva sessionvariabler och två styrhjälpare.
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: Definiera DOM-synlighet Då vill vi gå tillbaka till vår CSS och definiera två vyer av postsPage-elementet. I den första vyn visar vi allt innehåll i vår objektmodell. I den andra vyn visas bara en del av innehållet i vår objektmodell.
#postsPage{
.alert{
display: block;
}
.alert-hidden{
display: none;
}
}
Javascript: Triggering Alert
Slutligen går vi tillbaka till våra controllers och definierar en händelsekontroller som kommer att utlösa vår varning när du klickar på den.
Template.postsPage.events({
'click #triggerAlertButton':function(){
Session.set('alertLevel', 'Success');
Session.set('alertMessage', 'You successfully read this important alert message.');
}
});
Och det är allt som finns för det! Superenkelt, eller hur? Du kan nu ställa in alertLevel och alertMessage sessioner var som helst i kodbasen, och din applikation kommer att visa varningar och felmeddelanden reaktivt! :)
Arbetsflöde med flikar
Dokumentobjektmodell
Börja med att skapa dina flikar och rutor i din 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;
}
Aktiv flik För ytterligare effekt kan du utöka detta mönster genom att injicera klasser för att indikera den aktiva fliken.
<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 "";
}
},
});