# Examples of lists and looping in handlebars with #each

**URL:** <https://discuss.emberjs.com/t/examples-of-lists-and-looping-in-handlebars-with-each/2027>\
**Category:** Design\
**Created:** [August 2, 2013, 10:55pm UTC](https://discuss.emberjs.com/t/examples-of-lists-and-looping-in-handlebars-with-each/2027 "2013-08-02T22:55:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [August 2, 2013, 10:55pm UTC](https://discuss.emberjs.com/t/examples-of-lists-and-looping-in-handlebars-with-each/2027/1 "2013-08-02T22:55:27Z")

</div>

Can someone briefly describe the different ways you can loop over a collection of models in handlebars? And why you would use one approach vs another?

And yes I am aware of [http://emberjs.com/guides/templates/displaying-a-list-of-items/](http://emberjs.com/guides/templates/displaying-a-list-of-items/)

Looking over code samples it seems I have seen the pattern expressed in a lot of different ways but not clear on the nuance or rationale for some of the different forms.

So far I have seen the following:

With a model or controller named people

```
{{#each people}}   
  Hello, {{name}}    
{{/each}}

```

just the bare model This presume no controller?

```
{{#each model}}   
  Hello, {{name}}    
{{/each}}

```

just the model with an identifier I assume this is recommended for nesting templates and avoiding property member collisions between inner and outer templates

```
{{#each item in model}}   
  Hello, {{item.name}}    
{{/each}}

```

just the controller proxied to the model

```
{{#each controller}}   
   Hello, {{name}}    
{{/each}}

```

just the controller proxied to the model with identifier

```
 {{#each item in controller}}   
   Hello, {{item.name}}    
 {{/each}}

```

what is the difference between controller and content?

```
{{#each item in content}}   
  Hello, {{item.name}}    
{{/each}}

```

Other forms looping over a list takes?

Loop with index or conditional at each iteration?

For example is this pattern possible?

```
{{#each item in controller}}    
 Hello, {{item.name}}      
 {{ #if item.foo }}    
   The foo: {{ foo }}  
 {{ else }}    
   There is no foo.  
  {{/if }}  
{{/each}}

```

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [August 3, 2013, 3:48am UTC](https://discuss.emberjs.com/t/examples-of-lists-and-looping-in-handlebars-with-each/2027/2 "2013-08-03T03:48:25Z")

</div>

Partly to answer my own question about the distinction between **model** and **content**

model is the preferred approach

[https://github.com/emberjs/ember.js/issues/2007](https://github.com/emberjs/ember.js/issues/2007)

---

<div class="post-metadata">

**Author:** ![lookingsideways](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lookingsideways/32/13652_2.png) [@lookingsideways](https://discuss.emberjs.com/u/lookingsideways)\
**Post date:** [August 3, 2013, 9:26am UTC](https://discuss.emberjs.com/t/examples-of-lists-and-looping-in-handlebars-with-each/2027/3 "2013-08-03T09:26:21Z")

</div>

> [@GordonPotter](#):
>
> With a model or controller named people
> 
> ```
> {{#each people}}   
> Hello, {{name}}    
> {{/each}}
> 
> ```

I don’t think that is a model/controller named `people`, rather it is a property named `people` on the controller or the proxied model.

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [August 4, 2013, 5:39pm UTC](https://discuss.emberjs.com/t/examples-of-lists-and-looping-in-handlebars-with-each/2027/4 "2013-08-04T17:39:51Z")

</div>

OK, that makes sense.

I suppose to be more precise this means that “people” refers to a collection of properties in a collection of objects.

I guess I was a little confused on the terminology. I think it fair to say the controller and model are the same thing from the template’s perspective.

**template:**

```
{{#each people}} 
Hello, {{name}} 
{{/each}}

```

I guess technically “model” could be the wrong word for it because we could have a controller or route do the following (per the guide).

```
Person = Ember.Object.extend({
  name: null,
  isHappy: false
});

```

And somewhere in the controller (or route, or even application controller) is created the following array:

```
people = [
  Person.create({ name: 'Yehuda', isHappy: true }),
  Person.create({ name: 'Majd', isHappy: false })
];

```