This.data from #each-iteration

Question

I'm trying to access a value inside an {{#each in}}-iteration:

{{#each room in channels}}
  <form class="enterRoom">
    <button type="submit" class="roomJoin">
      <b>{{room.name}}</b>  
        <img src="{{room.roomBanner}}" alt=".">
           <input type="hidden" value="{{room.name}}" name="name">
         </button>            
          <div class="inRoom"> 
           {{#each name in room.inRoom}} 
              <a href="/c/{{name}}" target="_blank">{{name}}</a> 
           {{/each}}
          </div> 
  </form>
{{/each}}

Normally I would use this.name, for example, to get the name of it inside an event to use it further, like so

'submit .enterRoom'(event) {
  event.preventDefault();

  const isClosed = this.name; // room.name example here

   }

But this doesn't work in this scenario. What I tried before was:

• room.name
• this.room.name

But those give the same error

chat.js:86 Uncaught ReferenceError: room is not defined
    at Object.submit .enterRoom (chat.js:86)
    at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3818
    at Function.Template._withTemplateInstanceFunc (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3769)
    at Blaze.View.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3817)
    at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2617
    at Object.Blaze._withCurrentView (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2271)
    at Blaze._DOMRange.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2616)
    at HTMLFormElement.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:863)
    at HTMLDivElement.dispatch (modules.js?hash=8331598f8baf48556a442a64933e9b70b778274a:9685)
    at HTMLDivElement.elemData.handle (modules.js?hash=8331598f8baf48556a442a64933e9b70b778274a:9492)

Could someone explain to me how I could do it in this {{each in}}-setting properly?

Answer 1

The error has nothing to do with the each iterations of your template. What you try is to get the form data within the submit event handle. However, there is no context bound to this or room.

In order to get the room value, you need to access the input value.

Blaze offers a fast way of doing so, by using the Template's builtin jQuery (using templateInstance.$), which automatically scopes to the Template root instead of the whole document:

'submit .enterRoom'(event, templateInstance) {
  event.preventDefault();
  const roomName = templateInstance.$(event.currentTarget).find('input[name="name"]').val();
  // ...
}