CODEWITHSUNDEEP
javascriptcsstemplatesmeteorspacebars
Ethaan
Ethaan

Reputation: 11376

How do I make {{#each}} work with these templates?

I have been reading these tutorials on Spacebars.

Understanding Spacebars by David Burles

Meteor's Spacebars README on Github

Discover Meteor's Spacebars secrets

I think I can understand pretty good, but I am having this problem

i have the main.html template like this

<template name="main">
  <div class="container">   
<section id="bl-work-section">
    <div class="bl-box">
          <h4 class="sin">Próximo</h4>
          <h2  id="titulo1" class="sin"></h2>
          <h4 class="sin" id="sub1"></h4>
    </div>
        <div class="bl-content">
            <h2>Lunes 25 de Noviembre del 2014</h2> 

            {{#each mostrarLunes}}
            {{> Lunes}}
            {{/each}}
    <a></a>
    </div>    
        <span class="bl-icon bl-icon-close"></span>
</section>

<!-- Panel items for the works -->  
   <div class="bl-panel-items" id="bl-panel-work-items">
       {{#each mostrarLunes}}
            {{showPromos}}
       {{/each}}
    </div>                
        </div>
        </div><!-- /container -->       
</template>

So like you guys see im calling 2 templates inside main template and that 2 templates look like this

Lunes.html Template

<template name="Lunes">
  <ul id="bl-work-items">           
               <li data-panel="panel">        
              <div class="oferta">
            <a href="#"> <h3>Promocion: {{metadata.nombrePromo}} </h3><br><small>Descripcion:{{metadata.descripcionPromo}}</small></a>
        </div></li><br><br> 
                        </ul>    
</template>

showPromos.html Template

<template name="showPromos">
  <div data-panel="panel">          
    <div>
              <h1>Estoy viendo esto en la segunda pagina </h1>
                            <h3>Nombre Promo {{metadata.nombrePromo}}</h3>
                            <p>Descripcion promo.{{metadata.descripcionPromo}}</p>
                        </div>               
                    </div>          
                    <nav>
                        <span class="bl-icon bl-icon-close"></span>
                    </nav>       
</template>

So what is the problem? well if we look at the template Lunes and showPromos, i have a Data-Panel="panel", but its seems like that data panel don't work when i wrap that value on the {{each}} tags, because if i use, that {{each}} tags outside the data-panel selector it works, so its seems like its not working seems like they don't have connection.

so im asking if there is a way to connect that value? already try helper attributes like the 3rd link says, and don't work, the attributes helpers look like this

Template.main.helpers({
  attributes: function () {
    return { 
      dataPanel: "prueba",
    }
  }
});

Helper mostrarLunes

Template.main.helpers({
  'mostrarLunes' : function(){
    return Promociones.find({'metadata.diaOferta' : { $in: ['Lunes'] } });
  }
});

Upvotes: 4

Views: 371

Answers (1)

Rashad Nasir
Rashad Nasir

Reputation: 473

Looks like the data context isn't set. Try creating a template helper for your other templates with the data (I don't understand Spanish so I'm assuming this is the MongoDB cursor you need...

Templates.lunes.helpers({
  data: function() {
    return Promociones.find({'metadata.diaOferta' : { $in: ['Lunes'] } });
  }
});

Templates.showPromos.helpers({
  data: function() {
    return Promociones.find({'metadata.diaOferta' : { $in: ['Lunes'] } });
  }
});

Upvotes: 1

Related Questions