Rendu Meteor/Blaze: {{each}} dans un autre {{each}} ne renvoie pas les bonnes données (contexte de données)

Question

Je me demandais si vous pouviez me donner une idée de la façon de résoudre ce 'problème'. Je suis un débutant en JS (+ Meteor), donc ça pourrait être super simple pour vous. Je travaille avec helpers et blaze/spacebars pour le rendu.

J'ai une aide simple:

Template.monitoring.helpers({ 

    'realtime': function(){ 
     return { 
      house: house.find({}), 
      neighbours: neighbours.find({}), 
     } 
    } // end of realtime 

}); // end of helpers 

À ce stade, tout est OK. Je suis capable de récupérer les données que je veux. Le problème est que je ne suis pas capable de le rendre comme je le veux. Ci-dessous mon template.

<template name="monitoring"> 

    {{#each realtime.house}} 
    <div class="card red"> 
    SHOW STUFF ABOUT HOUSE 
    </div> 

    <div class="card blue"> 
     {{#each realtime.neighbours}} 
     SHOW STUFF ABOUT NEIGHBOURS OF THE SPECIFIC HOUSE 
     {{/each}} 
    </div> 

    {{/each}} -> end of each realtime.house 

</template> 

Plus précisément, quand mon modèle est rendu:

• nombre de cartons rouges = nombre de maisons => parfait

• chaque carte rouge contient les données de une maison => parfait

• nombre de cartes bleues = nombre de maisons => parfait

• chaque carte bleue contient les données de tous les voisins => FAUX. Qu'est-ce que je veux, c'est les données des voisins concernant la maison spécifique

Avez-vous comment obtenir les bonnes choses au bon endroit? Merci beaucoup.

Answer 1

Vous avez besoin de deux assistants: un qui retourne les maisons, et un qui renvoie les voisins avec une maison comme contexte. Sans le schéma, je ne peux pas donner une réponse précise mais supposons que chaque voisin a une propriété houseId qui joint les deux.

Template.monitoring.helpers({ 
    houses: function() { 
    return house.find(); 
    }, 

    neighbors: function() { 
    // Note the context here is a house because it's 
    // called from within an each. 
    return neighbours.find({ houseId: this._id }); 
    }, 
}); 

Et votre modèle ressemblerait à quelque chose comme ceci (en supposant que les voisins doivent être chacun dans une carte bleue):

<template name="monitoring"> 
    {{#each houses}} 
    <div class="card red"> 
     SHOW STUFF ABOUT HOUSE 
    </div> 
    {{#each neighbours}} 
     <div class="card blue"> 
     SHOW STUFF ABOUT NEIGHBOURS OF THE SPECIFIC HOUSE 
     </div> 
    {{/each}} 
    {{/each}} 
</template>