Meteor: how to access parent properties within nested templates?

Question

I am getting started with Meteor, and adapting the todo example to include nested tag groups. I have the following HTML, which outputs each name of each tag group, plus the list of tags in that each group:

  <template name="tag_filter">
    {{#each tag_types }}
      {{ tag_name }}
      {{#each values }}
        <div data-taggroup="{{ ../tag_name }}">
        {{ name }} ({{ count }})
        </div>
      {{/each}} 
    {{/each}}
</template>

My question is this: how do I adapt the event handler for clicks on the tags to access the value of the parent group's tag_name? (i.e. the data from the outer each loop).

Currently I have the code below, but this object only gives me access to name and count.

Template.tag_filter.events({
  'mousedown .tag': function () {
    console.log('tag mousedown', this);
    // How do I get the value of tag_name?
  }
});

As you can see, I've used Handlebars parent paths to add a data-taggroup attribute containing the name, but I'm not sure how to access that from within the event handler.

I think this question is related, but I don't understand the OP's solution (partly because I'm not using Coffeescript). There's also an closed Meteor issue which is related.

score 10 · Answer 1 · answered Mar 09 '13 at 04:34

10

I found the solution to access parent data:

Template.nestedTemplate.events({
    'click a.class':function(event,template){
        var parentID = template.data._id;
        console.log(parentID);
    }
});

The .events handler function receives two arguments: event, an object with information about the event, and template, a template instance for the template where the handler is defined. Took me a really long time to figure this one out. Don't use the handlebars solution, it shows your data!

answered Mar 09 '13 at 04:34

Marz

381
5
10

1

The `_id` will only exist if your current data context has that variable set. It's the same as calling `this._id`. I don't know how that would let you access the parent's data? – Jonatan Littke Jun 13 '13 at 18:44
4

this. will get the current context (e.g. if youre in an {{each}} block), for me `template` gets the templates context, which can differ from the current context. – Fabian Vogelsteller Jun 27 '13 at 11:23

score 3 · Accepted Answer · answered Oct 26 '12 at 21:33

I'm not sure whether you can get parent template data, but in your event handler you can access DOM elements: event.currentTarget will get the clicked element. Then just use jQuery to access attributes. If needed, event.currentTarget.parentNode will get the parent element in the DOM.

Ex: I don't know where you put the tag class, but let's say it's the class of your div where data-taggroup is defined. Then you could get the tag name using:

$(event.currentTarget).attr('data-taggroup')

score 0 · Answer 3 · edited Apr 20 '16 at 11:21

0

"click selected":function(e){
    // this._id
   var doc_id = $(e.currentTarget).parent().parent().attr("uid")
   console.log(doc_id) 
},
//specify the each id in the div above the nearest #each
//this will work in events but not in helpers`

edited Apr 20 '16 at 11:21

Shivek Parmar

2,865
2
33
42

answered Apr 20 '16 at 10:23

BGbhavesh

1
1

Meteor: how to access parent properties within nested templates?

3 Answers3

Linked