Ember.js displaying a list of elements, each element with its own view / controller

Question

What I want to achieve: create a controller with a view, and in this view I have a list of Gallery objects. Each element has its own view and controller.

All files are here: https://gist.github.com/7e72bb2f532c171b1bf3

It works as intended, after freezing some text is displayed / hidden, but personally, I think that this is not a very good solution.

I think that I should probably use the {{collection}} helper, but it does not have documentation for it on the ember.js page (there are some in the code, but I'm not sure that this helper is not a bit outdated, as in the source says: "// TODO: this whole module is not required").

I tried using the itemController property, but then I still have the template in one file.

I also tried to use the {{render}} helper in {{#each}}, but then it throws an error.

So, is there a better / cleaner way to achieve what I want?

EDIT

Having done everything, as in Michael Grassotti’s explanation, I have a strange behavior - the template property is taken from the fron itemController, and the {{action}} helper is attached to the parent controller. I took a screenshot to show what I mean.

Basically, “this” in itemView points to the right controller (itemController), but the target property has a parent controller.

Having done {{action "deleteGallery" this target="this"}} and clicking on it, I have an error, as in the screenshot. At this point, my ideas are running out ...

EDIT2:

ok, I overdid it, itemController is only for defining computed properties, and not for writing {{action}} handlers.

EDIT3: I think my issue with itemController and the purpose of the event will be fixed. https://github.com/emberjs/ember.js/issues/1846

Answer 1

I think that I should probably use the {{collection}} helper, but it does not have documentation for it on the ember.js page (there are some in the code, but I'm not sure that this helper is not a bit outdated, as in the source says: "// TODO: this whole module is not required").

I agree. The collection assistant is still working, but I'm not sure that it will become part of the public api. It’s best to stick with the {{#each}} helper if you can.

I tried using the itemController property, but then I still have the template in one file.

The itemController property is a good start. what is the best way to give each element its own controller.

I also tried to use the {{render}} helper in {{#each}}, but then it throws an error.

Yes, the {{render}} helper is not intended to be used in the {{each}} block.

So, is there a better / cleaner way to achieve what I want?

Yeah. To get started, use the itemController property. Then, to give everyone their own view, specify the itemViewClass option {{each helper}} . For instance:

 # in galleries_index.hbs {{each controller itemViewClass="App.GalleriesIndexItemView"} 

For more information, see the section "without blocking the use of api docs for each assistant .

Then configure App.GalleriesIndexItemView to specify the template:

 App.GalleriesIndexItemView = Ember.View.extend({ templateName: "galleries_index_item", tagName: 'li', classNames: ['span4'], hover: false, mouseEnter: function() { this.set('hover', true); }, mouseLeave: function() { this.set('hover', false); } }); 

and move the html from each helper to the template:

 # galleries_index_item.hbs <div class="thumbnail"> <a href="#"> <img src="images/300x200.gif" alt=""> </a> <div class="caption"> <h4>{{name}}</h4> {{#if view.hover}} <button {{action editGallery this }} class="btn btn-mini" type="button">Edit</button> <button {{action deleteGallery this}} class="btn btn-mini" type="button">Delete</button> {{/if}} </div> </div> 

Now each element has its own view and controller.

Answer 2

I suggest you use Ember.CollectionView .

Your galleriesIndex template will look like this:

 <div class="container"> <div class="row"> <div class="span12"> {{view App.GalleriesListView contentBinding="this"}} </div> </div> </div> 

View:

 App.GalleriesListView = Ember.CollectionView.extend({ classNameBindings: [':thumbnail', ':thumbnails-list'], itemViewClass: Ember.View.extend({ templateName: "galleriesListItem", hover: false, mouseEnter: function() { this.set('hover', true); }, mouseLeave: function() { this.set('hover', false; } }) }); 

galleriesListItem template:

 <li class="span4"> <div class="thumbnail"> <a href="#"> <img src="images/300x200.gif" alt=""> </a> <div class="caption"> <h4>{{view.content.name}}</h4> {{#if view.hover}} <button {{action editGallery view.content }} class="btn btn-mini" type="button">Edit</button> <button {{action deleteGallery view.content}} class="btn btn-mini" type="button">Delete</button> {{/if}} </div> </div> </li> 

I'm not sure there is no error in my code, I just copy-paste and write how it should look.

Regarding the TODO you saw, this is because Ember.CollectionView really needs the whole ember-handlebars , and not just the file that it needs, you don't need it.