Buscar..
Observaciones
Los ejemplos anteriores de Blaze son altamente compatibles con la biblioteca http://bootsnipp.com/ , que solo proporciona HTML y CSS para los componentes, y deja el javascript al desarrollador. Esto permite que los componentes compartan los mismos métodos subyacentes de clasificación, filtrado, consulta y cursor.
Menú desplegable
El siguiente ejemplo crea un menú desplegable Bootstrap, utilizando solo Blaze y no JQuery.
Modelo de objeto de documento
<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);
},
});
Barras de navegación
Una tarea muy común es crear barras de navegación de respuesta y crear barras de acción / pie de página que tengan diferentes controles según la página en la que se encuentre el usuario o a qué rol pertenece el usuario. Vamos a repasar cómo hacer estos controles.
Enrutador
Router.configure({
layoutTemplate: 'appLayout',
});
Router.route('checklistPage', {
path: '/lists/:_id',
onBeforeAction: function() {
Session.set('selectedListId', this.params._id);
this.next();
},
yieldTemplates: {
'navbarFooter': {
to: 'footer'
}
}
});
Crear una plantilla de barra de navegación
<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>
Definir los rendimientos en el diseño.
<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>
Modales
Este seguimiento es un enfoque puro para activar y desactivar los elementos de la interfaz de usuario. Piense en esto como un reemplazo para los diálogos modales. De hecho, hay varias formas de implementar diálogos modales usando este método (simplemente agregue máscaras de fondo y animaciones).
Modelo de objeto de documento
<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;
}
}
Etiquetado
La capa de base de datos Primero, queremos configurar el protocolo de distribución de datos, para asegurarnos de que podamos conservar los datos en la base de datos y enviarlos al cliente. Se deben crear tres archivos: uno en el servidor, uno en el cliente y uno compartido entre ambos.
// 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();
});
Este ejemplo asume el siguiente esquema de documento para el patrón de etiquetado:
{
_id: "3xHCsDexdPHN6vt7P",
title: "Sample Title",
text: "Lorem ipsum, solar et...",
tags: ["foo", "bar", "zkrk", "squee"]
}
Modelo de objeto de documento
En segundo lugar, queremos crear nuestro modelo de objetos en la capa de aplicación. A continuación se describe cómo utilizaría un panel Bootstrap para representar una publicación con título, texto y etiquetas. Tenga en cuenta que selectedPost , tagObjects y tag son todas funciones auxiliares de la plantilla blogPost. title y text son campos de nuestro registro de documentos.
<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
A continuación, queremos configurar algunos controladores para devolver datos, implementar algunos datos ingresados, etc.
// 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}});
}
});
Estilo
Por último, queremos definir algunas vistas diferentes para teléfonos, tabletas y computadoras de escritorio; y algunos estilos de interfaz de usuario básicos dependiendo de la entrada del usuario. Este ejemplo utiliza el precompilador Less, aunque la sintaxis debería ser aproximadamente la misma para Sass y 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;
}
}
}
Alertas y errores
Las alertas y los errores son casi los más simples de todos los patrones de componentes de Meteor. De hecho, son tan simples que apenas se registran como un patrón en sí mismos. En lugar de agregar módulos o patrones de FlashAlert, todo lo que necesita hacer es diseñar una plantilla del Manillar apropiada, agregar un ayudante y conectarla a una variable de sesión reactiva.
Prerrequisitos
El siguiente código requiere el precompilador LESS y Bootstrap-3, respectivamente. Deberá ejecutar los siguientes comandos en el símbolo del sistema para que funcionen.
meteor add less
meteor add ian:bootstrap-3
Modelo de objeto de documento: defina el objeto de alerta Comience agregando algunos elementos a su modelo de objeto de documento. En este caso, queremos crear un elemento div para nuestra alerta, que está conectado a dos ayudantes de manillar.
<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: Definir los ayudantes de plantilla Luego queremos conectar algunos controladores que llenarán el modelo de objetos con datos. Lo hacemos con dos variables de sesión reactivas y dos ayudantes de manillar.
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');
}
Estilo: Definir la visibilidad del DOM Luego queremos volver a nuestro CSS y definir dos vistas del elemento postsPage. En la primera Vista, mostramos todos los contenidos en nuestro modelo de objeto. En la segunda vista, solo se muestran algunos de los contenidos de nuestro modelo de objetos.
#postsPage{
.alert{
display: block;
}
.alert-hidden{
display: none;
}
}
Javascript: Activando la Alerta
Por último, volvemos a nuestros controladores y definimos un controlador de eventos, que activará nuestra alerta cuando se haga clic.
Template.postsPage.events({
'click #triggerAlertButton':function(){
Session.set('alertLevel', 'Success');
Session.set('alertMessage', 'You successfully read this important alert message.');
}
});
Y eso es todo lo que hay que hacer! Super simple, ¿verdad? Ahora puede configurar las variables de sesión alertLevel y alertMessage en cualquier lugar de su base de código, ¡y su aplicación mostrará alertas y mensajes de error de manera reactiva! :)
Flujo de trabajo con pestañas
Modelo de objeto de documento
Comience creando sus pestañas y paneles en su Modelo de objetos ...
<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";
}
}
});
Estilo
.visible {
display: block;
visibility: visible;
}
.hidden {
display: none;
visibility: hidden;
}
Pestaña activa Para un efecto adicional, puede extender este patrón inyectando clases para indicar la pestaña activa.
<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 "";
}
},
});