How to set itemController in each as (ember 1.11 beta3)?

Question

I want to try use:

{{#each content as |product index|}}
  {{index}}
{{/each}}

But my app has the itemContoller, like this:

{{#each product in content itemController='product'}}

If I set this:

{{#each content as |product index| itemController='product'}}

It doesn't work! I found all of the ember guides and did not find the answer.

Any help please.

Answer 1

Controllers (Object, Array and itemController) are going away. The new way to do things is by using a component.

So, instead of your item controller, you would define a component:

App.MyProductComponent = Ember.Component.extend({
  myIndex: function(){
    return this.get('passedIndex') + 1;
  }.property('passedIndex')
});

Then, inside your #each helper you would use it as follows:

<script type="text/x-handlebars" data-template-name="index">
  <ul>
    {{#each model as |product index|}}
      {{ my-product passedIndex=index product=product }}
    {{/each}}
  </ul>
</script>

Working solution here

See the following link and do a search for itemController - https://github.com/emberjs/rfcs/pull/15

Answer 2

Really? I mean, there are many cases where I think creating a component for displaying computed values based on the property(s) of the controller's model would be overkill..... What if I just want a string (I don't need the <div> thing added by ember for each component).

Creating helper(s) then? Wow.

Answer 3

@user3443096,

If you wouldn't like to have div tags inserted by ember use tagName: "" property like this:

App.InvoiceItemsComponent = Ember.Component.extend({
tagName: '' 
});

Now, divs around your component will not be inserted.