Ember CLI Depreciations

Updating Ember CLI

A series of real world deprecations one guy saw when updating his app.

Template Changes

Each Loops

/code_js/smores-mgr/app/pods/locations/template.hbs

Before:

{{#each record in this }}
    <li class="clearfix">
        <span class="text">{{record.name}}</span>
        <div class="tools">
            {{#link-to "locations.info" record}}{{fa-icon "folder-open-o"}}{{/link-to}}
            {{#link-to "locations.edit" record}}{{fa-icon "edit"}}{{/link-to}}
        </div>
    </li>
{{else}}
    <li>no records found ... :-(</li>
{{/each}}

After:

{{#each this as |record| }}
    <li class="clearfix">
        <span class="text">{{record.name}}</span>
        <div class="tools">
            {{#link-to "locations.info" record}}{{fa-icon "folder-open-o"}}{{/link-to}}
            {{#link-to "locations.edit" record}}{{fa-icon "edit"}}{{/link-to}}
        </div>
    </li>
{{else}}
    <li>no records found ... :-(</li>
{{/each}}

How to get positional index in EACH LOOP?

/code_js/smores-mgr/app/pods/components/form-wizard/template.hbs

Before:

{{#each steps as |step| }}
    {{wizard-step name=step.step activeIndex=activeIndex index=_view.contentIndex}}
{{/each}}

After:

{{#each steps as |step index| }}
    {{wizard-step name=step.step activeIndex=activeIndex index=index}}
{{/each}}

How Do I Make A Select Box?

Before

{{view "select"
content=genders
selection=model.gender
optionValuePath="content"
optionLabelPath="content"
prompt="Select"
class="form-control"}}

After

ember install emberx-select
...

{{x-select
content=genders
selection=model.gender
optionValuePath="content"
optionLabelPath="content"
prompt="Select"
class="form-control"}}

EmberData API Changes

	Async from server/store	Sync from store	Query server
Single Record	findRecord(type,id)	peekRecord(type, id)	queryRecord(type, {query})
All Records	findAll(type)	peekAll(type)	query(type, {query})*

Let's review store.find()

The first argument to store.find() is always the record type. The optional second argument determines if a request is made for all records, a single record, or a query.

return this.store.find('account', 9);  // => Get single record
return this.store.find('account');  // => Get all records
return this.store.find('account', {with: 'owners,attendees'});  // => Get list of records
return this.store.find('account', {with: 'owners,attendees', id: 9});  // => Get list of *single* records

Get records based on search criteria

/code_js/smores-mgr/app/pods/attendees/info/route.js

Before

model: function (params) {
    return this.store.find('attendee', {id: params.attendee_id, with: 'registrations'});
}

After

model: function (params) {
    return this.store.query('attendee', {id: params.attendee_id, with: 'registrations'});
}

Get all records from resource

/code_js/smores-mgr/app/pods/events/list/route.js

Before

model: function (params) {
    ...
    return Ember.RSVP.hash({
        ...
        locations: this.store.find('location'),
        programs: this.store.find('program'),
        sessions: this.store.find('session'),
        cabins: this.store.find('cabin')
    });
},

After

model: function (params) {
    ...
    return Ember.RSVP.hash({
        ...
        locations: this.store.findAll('location'),
        programs: this.store.findAll('program'),
        sessions: this.store.findAll('session'),
        cabins: this.store.findAll('cabin')
    });
},

What about local cache?

Get all records from local cache in store

Before

var posts = this.store.all('post'); // => no network request

After

var posts = this.store.peekAll('post'); // => no network request

Find Caches Record is now explicit

Before

???

After

var post = this.store.peekRecord('post', 1); // => no network request

What Else?

Elementary, My Dear Watson!

All the kids are injecting controllers and you wanna try too?

/code_js/smores-mgr/app/pods/registrations/add/step2/controller.js

Before

needs: ['registrations/add/step1'],
step1: Ember.computed.alias("controllers.registrations/add/step1"),

After

step1: Ember.inject.controller('registrations/add/step1'),