Access parent data in nested array rendering with handlebars

Question

I have the following data structure:

A : 
{
  "B": [
    {
      "C":["Hello", "World"]
    }
  ]

}

A has an attribute B which is an array. Every element of B has an attribute C which is again an array.

<template name="render">
{{#each B}}
{{#each C}}
<div class="clickme">{{this}}</div>
{{/each}}
{{/each}}
</template>

So now I have the event handler where I want to access the element of B in which 'this' (== element of C) was rendered in. But it seems impossible. How do I do it?

Template.render.events({
    "click .clickme" : function (event, template) {
         //template.data == A
         //Template.parentData(0) == A
         //Template.parentData(1) == A
         console.log("what was my parent B?");
    }
})

score 0 · Answer 1 · edited May 23 '17 at 12:07

You can go multiple levels upwards by using ../ In your case, suppose you want index of parent element, then:
{{@../index}}
To access another key of your parent element (not applicable in your case):
{{../key}}
References:
Access properties of the parent with a Handlebars 'each' loop
Handlebars.js: How to access parent index in nested each?

Edit: To access the parent element from "click .clickme" event handler, I do not know of a direct way to access from event handler, but one possible way is to create a onclick event in html, and call a function, to which you can pass the parent element (or its index) as parameter. In the function, set is as a session variable, which can then be reffered to in the "click .clickme" event handler.

Template:

 <template name="render">
    {{#each B}}
    {{#each C}}
    <div class="clickme" onclick="onclickfunction('{{@../index}}')">{{this}}</div>
    {{/each}}
    {{/each}}
    </template>

In client side javascript, define a function:

onclickfunction = function(parentindex) {
Session.set('indexofparent',parentindex);
}

In "click .clickme" event handler, get the session variable:

Template.render.events({
    "click .clickme" : function (event, template) {
         //template.data == A
         //Template.parentData(0) == A
         //Template.parentData(1) == A
         var parentelement = Session.get('indexofparent');
         console.log(parentelement);//Shows index of B.
    }
})

P.S. Index of B is a string, use pareseInt(parentelement) to parse to integer.

thank you but I think I wasn't clear enough: I want to access the parent in the "click .clickme" event handler — Jonas Felber, Nov 24 '15 at 15:11
I have edited the answer, please tell me if it works, also if there is slight syntax error here or there, fix it and do let me know so I can correct the same. — Piyush Mahensaria, Nov 25 '15 at 06:47
I did not try your new answer, because it is even hackier than what I did. You rely on that the event handler gets executed after the 'onClick' function. What I did was just setting the `data-index` of the div to the `@../index` and getting the index by `$(event.currentTarget).data('index')`. If you put this in your answer I will accept it. — Jonas Felber, Nov 26 '15 at 08:09

Access parent data in nested array rendering with handlebars

1 Answers1