Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
15 Things You Shouldn't Do In Ember Anymore
Kerrick Long
August 03, 2015
Programming
0
460
15 Things You Shouldn't Do In Ember Anymore
Kerrick Long
August 03, 2015
Tweet
Share
More Decks by Kerrick Long
See All by Kerrick Long
kerrick
0
490
kerrick
0
440
kerrick
1
420
kerrick
0
380
kerrick
0
62
kerrick
0
450
kerrick
0
430
kerrick
18
5.7k
Other Decks in Programming
See All in Programming
standfm
0
220
decoc
1
340
akkeylab
0
350
yosuke_furukawa
PRO
14
3.9k
bkuhlmann
4
620
supikiti
3
1.3k
muttsu_623
0
520
taoshotaro
1
370
ken3ypa
0
160
anchorcable
1
120
momofff
0
170
canon1ky
3
350
Featured
See All Featured
tmm1
61
8.4k
philhawksworth
190
17k
chrislema
173
14k
roundedbygravity
241
21k
morganepeng
92
14k
jakevdp
774
200k
afnizarnur
176
14k
andyhume
62
3.4k
chriscoyier
145
19k
3n
163
22k
jcasabona
7
520
62gerente
587
200k
Transcript
15 Things You shouldn’t be doing in Ember.js anymore
Kerrick Long Things I make and do Where to find
me online twitter.com/KerrickLong github.com/Kerrick Lead Front-end Developer at Second Street KerrickLong.com www. meetup.com/ STLEmber
Not using Ember CLI
npm install -g ember-cli ember new my-project
Using needs in Controllers
import Ember from 'ember'; export default Ember.Controller.extend({ needs: ['pages'],
title: 'controllers.pages.model.title' }); Using needs in Controllers
import Ember from 'ember'; export default Ember.Controller.extend({ pages: Ember.inject.controller(),
title: 'pages.model.title' }); Using inject in Controllers
import Ember from 'ember'; export default Ember.Controller.extend({ foo: Ember.inject.controller('pages'),
title: 'foo.model.title' }); Using inject in Controllers
Computed properties with getter / setter in one function
import Ember from 'ember'; export default Em.Service.extend({ minutes: 480,
hours: Em.computed('minutes', function(k, v) { if (arguments.length > 1) { this.set('minutes', v * 60); } return this.get('minutes') / 60; }) }); Computed getter / setter
Computed getter / setter import Ember from 'ember'; export
default Em.Service.extend({ minutes: 480, hours: Em.computed('minutes', { get() { return this.get('minutes') / 60; }, set(k, v) { return this.set('minutes', v * 60); } }) });
Using this.resource in the router
Using this.resource Router.map(function() { this.resource('pages', function() { this.resource('comments'); }); });
// app/routes/comments/index.js export default Ember.Route.extend({ model() { return this.store.find('comments'); } });
Using this.resource Router.map(function() { this.route('pages', function() { this.route('comments'); }); });
// app/routes/pages/comments/index.js export default Ember.Route.extend({ model() { return this.store.find('comments'); } });
Using {{bind- attr}}
Using {{bind-attr}} <button {{bind-attr title=buttonTitle}}> Submit! </button>
Using {{bind-attr}} <button title={{buttonTitle}}> Submit! </button>
{{#each}} without as
{{#each}} with in <ul> {{#each messages}} <li>{{text}}</li> {{/each}} </ul>
{{#each}} with in <ul> {{#each message in messages}} <li>{{message.text}}</li> {{/each}}
</ul>
{{#each}} with in <ul> {{#each messages as |message|}} <li>{{message.text}}</li> {{/each}}
</ul>
Using the {{render}} helper
The {{render}} helper <div> {{render "my-controller" model}} </div>
The {{render}} helper <div> {{my-component thing=model}} </div>
Using the {{view}} helper
ember g component new-way
Using Ember.Select
Using {{view "select"}} {{view "select" content=model.pages optionValuePath="content.id" optionLabelPath="content.title" prompt="-- Select
One --" }}
Using {{view "select"}} “Make your own.” http://emberjs.com/deprecations/v1.x/#toc_ember-select
Using {{view "select"}} “Make your own.” http://emberjs.com/deprecations/v1.x/#toc_ember-select Or use a
legacy addon.
Creating arrayComputed properties
Using arrayComputed import Ember from 'ember'; export default Ember.Controller.extend({
uniqueChildren: Ember.arrayComputed('model.@each.children.[]', { addedItem: function(accumulatedValue, model) { accumulatedValue.addObjects(model.get('children')); return accumulatedValue.uniq(); }, removedItem: function(accumulatedValue, model) { accumulatedValue.removeObjects(model.get('children')); return accumulatedValue.uniq(); } }) });
Using arrayComputed import Ember from 'ember'; export default Ember.Controller.extend({
uniqueChildren: Ember.computed('model.@each.children.[]', function() { return _.flatten(this.get('model').map(x => x.get('children'))).uniq(); }) });
Creating reduceComputed properties
Using reduceComputed import Ember from 'ember'; export default Ember.Controller.extend({
total: Ember.reduceComputed('model.@each.value', { initialValue: 0, addedItem(accumulatedValue, item) { return accumulatedValue + item.get('value'); }, removedItem(accumulatedValue, item) { return accumulatedValue - item.get('value'); } }) });
Using reduceComputed import Ember from 'ember'; export default Ember.Controller.extend({
total: Ember.computed('model.@each.value', function() { const addValues = (p, x) => p + x.get('value'); return this.get('model').reduce(addValues, 0); }) });
Using ObjectController
Using ObjectController import Ember from 'ember'; export default Ember.ObjectController.extend({
foo: Ember.computed.not('bar') });
Using ObjectController import Ember from 'ember'; export default Ember.Controller.extend({
foo: Ember.computed.not('model.bar') });
Using ArrayController
Using ArrayController import Ember from 'ember'; export default Ember.ArrayController.extend({
sortProperties: ['date', 'name'] // You can use `arrangedContent` });
Using ArrayController import Ember from 'ember'; export default Ember.Controller.extend({
arrangedContent: Ember.computed.sort(/**/) });
Using {{#each}} with itemController
ember g component new-way
Mutating data in components
Parent Child data manipulation manipulation source of data
Parent Child data manipulation source of data
Parent Child data manipulation actions regarding user input or intent
source of data
Thank you.