# Convert ArrayController with item controller having computed properties

**URL:** <https://discuss.emberjs.com/t/convert-arraycontroller-with-item-controller-having-computed-properties/8258>\
**Category:** Uncategorized\
**Created:** [June 23, 2015, 12:40pm UTC](https://discuss.emberjs.com/t/convert-arraycontroller-with-item-controller-having-computed-properties/8258 "2015-06-23T12:40:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ecguo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ecguo/32/15871_2.png) [@ecguo](https://discuss.emberjs.com/u/ecguo)\
**Post date:** [June 23, 2015, 12:40pm UTC](https://discuss.emberjs.com/t/convert-arraycontroller-with-item-controller-having-computed-properties/8258/1 "2015-06-23T12:40:27Z")

</div>

I try to convert [Ember.js Web Development with Ember CLI ch5 example 1](https://github.com/Eric-Guo/ember-examples-with-cli/tree/ch5-example1 "ch5-example1") to be Ember 2.0 ready by removing [deprecations](http://emberjs.com/deprecations/v1.x/#toc_view-and-controller-template-keywords "deprecations") warning about ArrayController, but really don’t know how to rewrite ArrayController with itemController case.

template [products.hbs](https://github.com/Eric-Guo/ember-examples-with-cli/blob/ch5-example1/app/templates/products.hbs#L10 "products.hbs") as below, if I just change ArrayController → Controller, model.name is still can accessible, but how to handle the [itemController](https://github.com/Eric-Guo/ember-examples-with-cli/blob/ch5-example1/app/controllers/products.js#L6 "itemController")?

```
{{#each product in controller}}
<tr>
    <td>{{product.model.name}}</td>
    <td>{{product.shortDescription}}</td>
    <td>{{product.formattedDimension}}</td>
    <td>{{product.formattedPrice}}</td>
</tr>
{{/each}}

```

---

<div class="post-metadata">

**Author:** ![igorpreston](https://avatars.discourse-cdn.com/v4/letter/i/cc9497/32.png) [@igorpreston](https://discuss.emberjs.com/u/igorpreston)\
**Post date:** [June 23, 2015, 3:50pm UTC](https://discuss.emberjs.com/t/convert-arraycontroller-with-item-controller-having-computed-properties/8258/2 "2015-06-23T15:50:32Z")

</div>

You could use Ember Component instead of itemController and this will be near drop-in replacement, but with some minor modifications. The main point is that component takes care of each object inside your model instead of itemController and can be reused wherever needed.

Okay, let’s create an Ember Component first. Here we are defining a **product** property where we will store an instance of product passed down to the component from the model.

```
// components/x-product.js
export default Ember.Component.extend({
  product: null
});

```

Next, define a component template that will be rendered inside **products** template. Here we display the needed properties of product object.

```
// templates/components/x-product.hbs
<tr class="product">
  <td>{{product.name}}</td>
  <td>{{product.description}}</td>
  <td>{{product.currency}}</td>
</tr>

```

Then you would iterate over the model in your **products** template and assign each item inside model to the component’s _product property_.

```
// templates/products.hbs
{{#each model as |product|}}
  {{x-product product=product}}
{{/each}}

```

I checked it before posting so this works fine. To customize this solution to your own needs, just add computed properties to the component from your itemController file and edit component handlebars template to display those properties as you like. Pay attention to also change all mentions to the **model property** by swapping it with **product property** , like this:

```
formattedPrice: function(){
  return this.get('product.symbol') + " " + Ember.$.number(this.get('product.price'),2);
}.property('product.symbol','product.price'),

```

Note, that in Ember 2.0 I would use new #each-in helper to iterate over product object properties in component template because it really simplifies the template if you want to display all the properties of the object, like this:

```
{{#each-in product as |key value|}}
  <p>{{key}}: {{value}}</p>
{{/each}

```

---

<div class="post-metadata">

**Author:** ![ecguo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ecguo/32/15871_2.png) [@ecguo](https://discuss.emberjs.com/u/ecguo)\
**Post date:** [June 23, 2015, 10:47pm UTC](https://discuss.emberjs.com/t/convert-arraycontroller-with-item-controller-having-computed-properties/8258/3 "2015-06-23T22:47:47Z")

</div>

Really appreciate your guide, seems still long journey to go in Ember way for me, thanks again.