'this._id' return undefined when using {{#each .. in ..}}

help
1

Hello all,

Why this._id return undefined when loop using {{#each .. in ..}}

But when using {{#each ..}}, this._id return mongoID correctly.

Why is that? What have I done wrong? Please advice, thank you.

Regards

2

{{#each ..}} creates new this context in which you can use _id.
{{#each item in items}} creates new item context, so you can use item._id.

3

Thanks for the info. I’ll try it now.

4

Hi,

I get "Uncaught ReferenceError: item is not defined".

Data loaded at table row correctly. Please advice, thank you.

Regards

5

Please show the code.

6

Hi,

The following is my code

{{#each item in items}}
     <tr>
          <td>{{item.profile.firstName}}</td>
          <td>{{item.profile.lastName}}</td>
          <td>{{item.emails.[0].address}}</td>
          <td>{{item.profile.mobileNumber}}</td>
     </tr>
{{/each}}

"click tr": function() {
        console.log(item._id);
}
7

You cannot use item outside of the template’s {{each}}, that’s impossible, your Javascript won’t know where the to get this item from.

Move the whole content of {{each}} into separate template, pass the item into its data context and then you can safely use it in your JS.

8

Sorry, I’m still trying to understand your statement of “You cannot use item outside of the template’s {{each}}”

9

Nevermind, I’ll use each instead of each … in for the moment. I’ll try to understand this more in detail at later stage. Thanks again.

10

The item object exists ONLY in the context of template’s {{each}}. If you are trying to address it from your Javascript functions, these functions won’t know what object you think of.

Think of it this way. There are 10 students in the class. Your teachers asks you “tell me what’s the name of the student”. How are you able to tell which student the teacher is talking about?

Also, the sooner you start abstracting the contents of your {{each}} into separate templates, the faster you’ll learn how to write good code.

11

Ok, understand better now. The solution in meteor way?

12

The best practice is to use separate template whenever you’re using {{each}}.

While the best solution would be to install manuel:viewmodel package and call a method directly from the template.

13

What is the main difference between {#each …} and {#each … in …} and the good and bad?

{#each … in …} seems like complicate the code compared to {#each …}

14

The difference is that {#each item in items} doesn’t create separate data context. The main advantage here is that because the data context remains the same, you are still able to use properties from outside of {#each}.

The recommendation in Blaze guide is to use {#each in}.

15

Yes I read it from the guide that why my first try is using {#each … in …}

But don’t understand why I’m unable to get the ID so I try use {#each …} and able to get it.

16

So I should have something like this? Is it?

{{#each item in items}}
     {{> item}}
{{/each}}
17 
{{#each item in items}}
     {{> itemTemplate item=item}}
{{/each}}
18

Ok thanks. I’ll try that now.

19

I changed the code as you’ve recommended. item display correctly at table. I still get the exact same error. What I did wrong?

<tbody>
     {{#each item in items}}
          {{> itemTemplate item=item}}
     {{/each}}
</tbody>

<template name="itemTemplate">
  <tr>
      <td>{{item.profile.firstName}}</td>
      <td>{{item.profile.lastName}}</td>
      <td>{{item.emails.[0].address}}</td>
      <td>{{item.profile.mobileNumber}}</td>
  </tr>
</template>

Template.itemTemplate.events({
    "click tr": function() {
        console.log(item._id);
    }
});

Uncaught ReferenceError: item is not defined

20

That’s because you need to refer to item object in your template instance, not just as “item”.

http://blazejs.org/guide/reusable-components.html#Use-the-template-instance

Can somebody help here with an example? It’s been ages since I’ve used pure Blaze for the last time.