15 ThingsYou shouldn’t be doingin Ember.js anymore
View Slide
Kerrick LongThings I make and do Where to find me onlinetwitter.com/KerrickLonggithub.com/KerrickLead Front-end Developerat Second StreetKerrickLong.comwww.meetup.com/ STLEmber
Not usingEmber CLI
npm install -g ember-cliember new my-project
Using needs inControllers
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
Computedproperties withgetter / setter inone 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 / setterimport 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); } }) });
Usingthis.resourcein the router
Using this.resourceRouter.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.resourceRouter.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}} Submit!
{{#each}} without as
{{#each}} with in {{#each messages}} {{text}} {{/each}}
{{#each}} with in {{#each message in messages}} {{message.text}} {{/each}}
{{#each}} with in {{#each messages as |message|}} {{message.text}} {{/each}}
Using the{{render}}helper
The {{render}} helper {{render "my-controller" model}}
The {{render}} helper {{my-component thing=model}}
Using the{{view}} helper
ember g component new-way
UsingEmber.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-selectOr use a legacy addon.
CreatingarrayComputedproperties
Using arrayComputedimport Ember from 'ember'; export default Ember.Controller.extend({ uniqueChildren: Ember.arrayComputed('[email protected].[]', { 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 arrayComputedimport Ember from 'ember'; export default Ember.Controller.extend({ uniqueChildren: Ember.computed('[email protected].[]', function() { return _.flatten(this.get('model').map(x => x.get('children'))).uniq(); }) });
CreatingreduceComputedproperties
Using reduceComputedimport Ember from 'ember'; export default Ember.Controller.extend({ total: Ember.reduceComputed('[email protected]', { initialValue: 0, addedItem(accumulatedValue, item) { return accumulatedValue + item.get('value'); }, removedItem(accumulatedValue, item) { return accumulatedValue - item.get('value'); } }) });
Using reduceComputedimport Ember from 'ember'; export default Ember.Controller.extend({ total: Ember.computed('[email protected]', function() { const addValues = (p, x) => p + x.get('value'); return this.get('model').reduce(addValues, 0); }) });
UsingObjectController
Using ObjectControllerimport Ember from 'ember'; export default Ember.ObjectController.extend({ foo: Ember.computed.not('bar') });
Using ObjectControllerimport Ember from 'ember'; export default Ember.Controller.extend({ foo: Ember.computed.not('model.bar') });
UsingArrayController
Using ArrayControllerimport Ember from 'ember'; export default Ember.ArrayController.extend({ sortProperties: ['date', 'name'] // You can use `arrangedContent` });
Using ArrayControllerimport Ember from 'ember'; export default Ember.Controller.extend({ arrangedContent: Ember.computed.sort(/**/) });
Using{{#each}} withitemController
Mutating data incomponents
ParentChilddatamanipulationmanipulationsource of data
ParentChilddatamanipulationsource of data
ParentChilddatamanipulationactions regarding user input or intentsource of data
Thank you.
kerrick
rabbitmagician1
maroon1st
suzukihoge
stanby_inc
_tanako
uhooi
daipresents
tsukushi
fornewid
kazue
ivargrimstad
ohmae
eitanlees
jponch
hatefulcrawdad
gr2m
mza
matthewcrist
mraible
brad_frost
reverentgeek
jmmastey
jonyablonski
akmur