Replace Object And Array Controllers With Ember.Controller and remove ItemControllers

[teddyzeenny]

Part of #360

Ember.ObjectController, Ember.ArrayController and itemController are going away. We need to replace them with Ember.Controller.

• Create app/controllers/object.js that exports Ember.Controller. This will prevent Ember from automatically creating object controllers:

// app/controllers/object.js
import Ember from 'ember';
const { Controller } = Ember;
export default Controller;

• Replace all Ember.ObjectController with Ember.Controller. This means that properties that access model properties will need to use model.propertyName instead of just propertyName since the Controller will no longer be a proxy.
• Create app/controllers/array.js that exports Ember.Controller. This will prevent Ember from automatically creating array controllers:

// app/controllers/array.js
import Ember from 'ember';
const { Controller } = Ember;
export default Controller;

• Replace all Ember.ArrayController with Ember.Controller. This means that all array methods/properties called on the controller will need to be called on the model instead. Example: this.forEach will need to be this.get('model').forEach, this.get('length') will need to be this.get('model.length'). sortProperties will also no longer work. We would need to create a computed property that sorts the model. {{#each}} and {{#each controller}} need to be replaced with {{#each model as |item|}}.
• Replace itemController in {{#each}} helpers with components.
  Old Version:

{{!-- app/templates/people.hbs --}}
{{#each model itemController="person-item"}}
  {{if #canDrive}}
    Old enough to drive
  {{/if}}
{{/each}]

// app/controllers/person-item.js
export default Ember.ObjectController.extend({
  canDrive: computed.gte('age', 18);
});

New Version:

{{!-- app/templates/people.hbs --}}
{{#each model as |person|}}
  {{#person-item model=person as |personItem|}}
    {{#if personItem.canDrive}}
      Old enough to drive
    {{/if}}
  {{/person-item}}
{{/each}}

// app/components/person-item.js
import Ember from 'ember';
const { Component, computed: { gte } } = Ember;
export default Component.extend({
  canDrive: gte('model.age', 18)
});

// app/components/person-item.hbs
{{yield this}}

[rwjblue]

Might want to lump itemController in with this one...

[teddyzeenny]

@rwjblue 👍 added item controller.

[camskene]

I can work on this.

[camskene]

@teddyzeenny should I branch off master or stable? I noticed both of those branches have ~60 failing tests.

[teddyzeenny]

@camskene hey, sorry for the mess. Regenerator library made a breaking change incompatible with Babel runtime in a patch version which broke all the tests. Working on a fix.

To answer your question, all PRs go against master, so always branch off master.

[teddyzeenny]

Should be fixed with #384.

Make sure to rm -rf node_modules && npm cache clean && npm install

[teddyzeenny]

You won't be able to use block params ({{yield this}}) until we upgrade to Ember 1.11

[bjonord]

@camskene You working on this one?

Otherwise I can pick it up.

[camskene]

@bjoska If you could pick it up that would be great! I was investigating last night and it's a bit beyond my ember foo...

[bjonord]

Got it!

Cheers!

On 6 jun 2015, at 01:53, Cam Skene notifications@github.com wrote:

@bjoska If you could pick it up that would be great! I was investigating last night and it's a bit beyond my ember foo...

—
Reply to this email directly or view it on GitHub.

[teddyzeenny]

If anyone has any questions feel free to ping me (@teddy) on the Ember Community slack #ember-inspector channel. Automated invite at https://ember-community-slackin.herokuapp.com

[zzr994]

Hi teddyzeenny,
We are using ember 1.9.1 and we want to move towards ember 2.0.0. As an intermediate step we are using ember 1.11.3 and get rid of all the depreciation warnings. One of the items that need to be refactored is the ArrayController and the ObjectController. We have managed to take care of the ArrayController. The only remaining issue is refactoring the ObjectController.

In the templates we have lot of code that looks like the following:
{{#each runningModules itemController="module" as |module|}}
{{module-tab class="inline-block" module=module tagName='div'}}
{{/each}}
The same ObjectController is used in multiple places allowing the properties defined on the ObjectController to be used multiple times. This provides an advantage of code re-use.

What do you think is the best way to refactor the code in the ObjectController so that it can be used multiple times?

[RobbieTheWagner]

Closing this as these controller types have been removed already.