How do I implement nested #each blocks with Meteor and MongoDB reference?

Question

So, I have the following HandlebarsJS helper:

<ul class="list-unstyled">
      {{#each gralSkills}}
        <li class="pl-14"><i class="flaticon-checkmark4"></i> 
          <a data-toggle="collapse" href="#collapse{{number}}">
            {{gralSkillName}}
          </a>
          <div id="collapse{{number}}" class="panel-collapse collapse small pl-21">
              <span class="block">{{gralSkillDescription}}</span>
              <span class="uppercase block">Indicadores - <a href="#" class="flaticon-plus34 text-danger not-underline" id="new-gral-skill-indicator"></a></span>
              <ul class="list-unstyled pl-14">                
                {{#each gralSkillIndicators}}
                  <li>- {{indicatorName}}</li>
                {{/each}}
              </ul>
          </div>
        </li>
      {{/each}}
      </ul>

With it's respective JS Code:

 Template.courseEdit.helpers({
      gralSkills: function(){
        var thisCourseId = Session.get('templateId');
        // console.log(thisCourseId);
        return gralSkills.find({"courseId": thisCourseId});
      },
      gralSkillIndicators: function() {
        var thisGralSkillId = Session.get('templateId');
        return Indicators.find({'courseId': thisGralSkillId});
      }
    });

The view looks like this:

Screenshot http://soygus.com/img/emdinscreenshot.png

Which means that I'm getting both data into the view. The issue comes inside the loop, where I can't find how to reference the Indicadores to its respective parent.

Take a look to my MongoDB Indicators collection:

   /* 0 */
    {
        "indicatorName" : "La alumna presenta en clase con seguridad y confianza",
        // Belongs to a gralSkill (Autoestima)
        "gralSkillId" : "KgTAPKMeML2qWvsXA",
        "courseId" : "3vCN5v5brsid5tFGb",
        "_id" : "rpnkiRhdTMrsjgn7i"
    }

The only Indicator created belongs to the first list item in the view, however, I'm getting it displayed in all of the list-items.

This is the gralSkills collection for your reference:

  /* 0 */
    {
        "gralSkillName" : "Autoestima",
        "gralSkillDescription" : "La capacidad de confiar en las habilidades propias.",
        "submitted" : 1398089534856,
        "number" : 1,
        "courseId" : "3vCN5v5brsid5tFGb",
        "_id" : "KgTAPKMeML2qWvsXA"
    }

    /* 1 */
    {
        "gralSkillName" : "Emprendimiento",
        "gralSkillDescription" : "La capacidad de proponer soluciones con ideas y modelos de negocio",
        "submitted" : 1398094493828,
        "number" : 2,
        "courseId" : "3vCN5v5brsid5tFGb",
        "_id" : "zJGfgnZE8TMejQtWH"
    }

How can I make the list-items display its correspondent Indicator?

Thanks in advance.

Answer 1

Not sure if I'm getting this right, but I think in the gralSkillIndicators helper, it seems like you shouldn't be assigning the global Session variable Session.get('templateId') to thisGralSkillId, since that Session variable will be the same for all items of the loop.

Instead, you should write something like var thisGralSkillId = this._id, which should let you access the _id of the parent data context. If that makes sense?