How to access scope in event handler for [each..in] block?


#1

I’m using the new {{#each .. in}} syntax to render a grid of projects. It looks like this:

{{#each projects}}
  <div class="project">
    <div class="meta">
      <h6>{{client.name}}</h6>
      {{name}}
    </div>
    <div class="blocks">
      {{#each block in blocks}}
        <div class="{{block.label}}">
           ...
        </div>
      {{/each}}
    </div>
  </div>
{{/each}}

When clicking on a block in the grid, the app should navigate to a page specific for that block. The new each in syntax was ideal, because otherwise I had no way of getting to the project data (without breaking up the template). Now, I can get to the project via this, but how do I find out what the value of block was in the event handler? Without this, this syntax would be a lot less useful I think… Hope I’m missing something :smile:

Template.Grid.events
  'click .blocks div': ->
    this # project Document object, yay!
    Template.scope( 'block' ) # block?

#2

Is this a stupid question? I still haven’t figured it out :confused:


#3

I would check

console.log(Blaze.getData(event.currentTarget))

and see if there is block property or something like that


#4

Thanks, I’ve tried that but it doesn’t work. That value is the same as this


#5

than scope some part with {{#with block}} and target that part in Blaze.getData

or use normal #each and use {{…/something}} and Template.parentData() to get to parent


#6

Right. Except that Template.parentData() doesn’t work when you stay inside the same template (I also thought it would, but it doesn’t).


#7

try adding something like:

<div data-blockid={{block._id}} ...></div>

In the helper you can do a simple:

var blockId = $(event.originalTarget).data('blockid');

#8

Hmm… That feels very ‘un-Meteoric’ to me…