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
710
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
The ECMAScript formerly known as 6
kerrick
0
730
CSS Study Group 1
kerrick
0
710
CSS Study Group 2
kerrick
1
670
Services & Component Collaboration
kerrick
0
520
Donate STL #Build4STL Hackathon Keynote
kerrick
0
160
Donate STL
kerrick
0
590
TDD With Ember.js
kerrick
0
680
JavaScript Promises - Thinking Sync in an Async World
kerrick
20
6.4k
Other Decks in Programming
See All in Programming
アプリのログをチーム外で活用してもらうためにやったこと
shotakashihara
0
190
Jakarta EE 10 is Coming Your Way
ivargrimstad
0
2.9k
Explore Java 17 and beyond
josepaumard
3
660
競プロへの誘 -いざな-
u76ner
0
380
Kotlin KSP - Intro
taehwandev
1
490
CIでAndroidUIテストの様子を録画してみた
mkeeda
0
180
全国の中高生がプログラミングを学んでいるCloud9環境の仕組み@JAWS-UG_SRE支部_#3
asache3
0
120
Unity Localization で多言語対応実装しよう / xrdnk-yokohamaunity-lt10-20220513
xrdnk
0
150
NieR Re[in]carnationにおけるUnityアニメーション活用術
applibot
1
620
The future of trust stores in Python
sethmlarson
0
180
SRE bridge the gap: Feature development to Core API / 機能開発チームとコアAPIチームの架け橋としてのSRE
kenzan100
1
290
Swift Concurrencyによる安全で快適な非同期処理
tattn
2
330
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Statistics for Hackers
jakevdp
781
210k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
212
11k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Three Pipe Problems
jasonvnalue
89
8.6k
Unsuck your backbone
ammeep
659
55k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
Bootstrapping a Software Product
garrettdimon
295
110k
The Brand Is Dead. Long Live the Brand.
mthomps
45
2.7k
How to Ace a Technical Interview
jacobian
265
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
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.