Como puedo mostrar un template desde un sidebar

help
1

Hola saludos cordiales a todos, estoy trabajando en una pequeña app y me detiene el avance el no saber como puedo hacer que desde un sidebar se muestre una plantilla especifica para la opción seleccionada desde el sidebar, ejemplo:

<div class="sidebar light-grey -bar-block" style="width:25%">
  <h3 class="bar-item">Menu</h3>
  <a href="#" class="bar-item button">opcion 1</a>
  <a href="#" class="bar-item button">opcion 2</a>
  <a href="#" class="bar-item button">opcion 3</a>
</div>

<!-- Page Content -->
<div style="margin-left:25%">

<div class="container teal">
  <h1>My Page</h1>
</div>

if clic opcion 1
ver {{> opcion1 }}

else clic opcion 2
ve {{> opcion2 }}

else opcion 3
ver {{> opcion3 }}

</div>

<template name="opcion1"> <h1>template opcion 1 :) </h1> </template>
<template name="opcion2"> <h1>template opcion 2 :( </h1> </template>
<template name="opcion3">  <h1>template opcion 3 O.o </h1> </template>

Como puedo mostrar cada plantilla al seleccionar una opción de una manera simple, fácil y adecuada, ya que soy novato con meteor.js

EJEMPLO:

opcion 1
opcion 1672×545 133 KB

opcion 2
opcion 2672×544 11 KB

Gracias de ante mano la ayuda que me puedan ofrecer

2

If you want to use Blaze, look to {{> Template.dynamic template=selectedOption }}

For example your top level template can have a reactive variable for the selected option and it can be passed as I just showed to dynamically render the template.

But better off using React instead…

3

muchas gracias por tu respuesta, he buscado información acerca de Blaze template pero la información se me hace muy confusa, puedes darme un ejemplo mejor de como usarlo? o un enlace de documentación que expliquen bien su funcionamiento?

4

look at this

From what I gave you should be able to Google for some further resources… there’s a lot of info out there.

5

gracias por la información :+1:

6

Que más @morillomig93?

Yo te recomendaria empezar de una vez con React, encuentras más tutoriales y la documentacion es mas clara.

Sin embargo si sigues necesitando ayuda con Blaze no dudes en taggearme.

Saludos.

7

@pmogollon gracias por tu recomendación, conseguí una solución utilizando blaze (template.dynamic) con un buen ejemplo que encontré, pero veo que muchos usan react en vez de blaze, así que, seguiré tu consejo y sustituiré blaze por react.
Si no es mucha molestia y sabes como hacerlo con react, pues agradecería tu ayuda y así tendría una idea de como funciona react en mi caso particular.

Gracias.!

8

Claro que si, en react es mucho mas sencillo por que renderizas los componentes que quieras con un simple if. Por ejemplo

function Layout(props) {
  return(
    <div>
      <NavBar/>

      { 
        props.siAlgo ?
          <Algo/>
          :
          <OtroAlgo/>
      }

      <Footer/>
    </div>
  );
}

Sin embargo es mejor que uses un router para hacer esto. Puedes usar FlowRouter, ReactRouter o ReachRouter. Todos son sencillos de utilizar, el mas usado es ReactRouter.

9

Se ve sencillo, lo usaré, gracias por la recomendación nuevamente.!