Ember.js Displaying List Of Items, Each Item With It's Own View/controller

What I want to achieve: create controller with view, and in this view I have list of 'Gallery' objects. Each item has it's own view and controller. All files are here: https://gis

Solution 1:

I think that I maybe should use {{collection}} helper, but there is no documentation for it on ember.js page (there is some in code, but I'm not sure if this helper is not a little bit outdated, as in source it says "// TODO: Don't require all of this module").

Agreed. Collection helper still works but I'm not certain it will be part of the public-api going forward. Best to stick with the {{#each}} helper if you can.

I tried to use itemController property, but then I still have template in one file.

The itemController property is a good start. that's the best way to give each item it's own controller.

Also tried to use {{render}} helper in {{#each}}, but then it throw error.

Yeah the {{render}} helper is not designed for use within an {{each}} block.

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

Yep. For starters use the itemController property. Then to give each it's own view, provide an itemViewClass option to the {{each helper}}. For example:

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

See the "blockless use" section of api docs for the each helper for detail.

Then customize App.GalleriesIndexItemView to specify a 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 html from the each helper to into the template:

# galleries_index_item.hbs
  <divclass="thumbnail"><ahref="#"><imgsrc="images/300x200.gif"alt=""></a><divclass="caption"><h4>{{name}}</h4>              
          {{#if view.hover}}
              <button {{actioneditGallerythis }} class="btn btn-mini"type="button">Edit</button><button {{actiondeleteGallerythis}} class="btn btn-mini"type="button">Delete</button>
          {{/if}}
      </div></div>

Now every item has it's own view and controller.

Solution 2:

I suggest you to use an Ember.CollectionView.

Your galleriesIndex template will looks like:

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

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

The galleriesListItem template:

<li class="span4">
    <divclass="thumbnail"><ahref="#"><imgsrc="images/300x200.gif"alt=""></a><divclass="caption"><h4>{{view.content.name}}</h4>                        
            {{#if view.hover}}
                <button {{actioneditGalleryview.content }} class="btn btn-mini"type="button">Edit</button><button {{actiondeleteGalleryview.content}} class="btn btn-mini"type="button">Delete</button>
            {{/if}}
        </div></div></li>

I am not sure there is no error in my code, I just copy-paste and write how it should looks like.

Concerning the TODO you saw, this is because the Ember.CollectionView actually needs all the ember-handlebars module instead of just the file it needs, you should not care about that.