Examples of lists and looping in handlebars with #each


#1

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/

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}}

#2

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

model is the preferred approach


#3

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.


#4

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 })
];