View, CollectionView and ContainerView

1

I’ve used the View mostly, and I’m pretty familiar with that one. I’m unsure on when to use either a CollectionView or a ContainerView.

At the moment I’m generating an index with different items using #each over an ArrayController. I also want to interact with the different items, and I have the feeling that I’m running into the boundaries of the View in combination with #each.

What would be a good rule of thumb as to change to the CollectionView or ContainerView?

Thanks

2

Ember.Handlebars.EachView is a subclass of Ember.CollectionView. So you are kind of already using a collection view.

Maybe if you could tell us a little more about what you want to achieve, we could help you better.

Also, have you read the API docs for ContainerView and CollectionView so you know what they can be used for?

3

Yes, I hit the docs. The example that is given with a content of A, B and C doesn’t inspire me on when to use it though.

I have for example the project.index template, which is showing all projects through a #each loop. inside the loop I do the necessary bindings to wire everything up. I’m doing that in pretty much every index template.

I’m wondering at what point people decide to do it differently and use a CollectionView.

4

I would say only use CollectionView if you want to control the child views yourself. For example if you want to decide when to create the child views, e.g. when doing DOM reuse, where you only create child views for what’s visible on the screen right now (for performance optimization). See GitHub - emberjs/list-view: An incremental rendering list view for Ember.js for example.

Normally you’d just use {{each}}.

If you could show a JSFiddle/JSBin with this, it would be easier to understand exactly what you’re trying to achieve.

5

Thanks. I don’t have anything to share right now, it’s more a theoretical question at this point.

6

Collection and Container views have a specific use-case. In some cases, it is not sufficient for your application’s needs to simply write handlebars view template tags inside your templates in order to spawn child views. You may get away with some use cases like

{{#if needsView}}
{{view App.MyChildView }}
{{/if}}

to control the rendering of child views when a boolean value is all that determines whether the view should be rendered or not.

However, in many cases you will have more complex conditions that may result in views being created/removed and these are the exact use cases that Container and CollectionView aim to satisfy.

For an example of using a containerview, you can check out my blogpost on layered canvases in Ember at http://stevekane.github.com

Hope that helps,

Steve

1 Like
7

thanks Steve, that helps.