{ { E M B E R - C O M P O N E N T S
D E E P D I V E = T R U E } }
@ R A Y T I L E Y

B A C K I N M Y
D A Y
MODEL
VIEW
CONTROLLER

M O D E L L A Y E R
I S R E A L L Y T H E
R O U T E R
MODEL
VIEW
CONTROLLER

U S E A
C O M P O N E N T
MODEL
VIEW
CONTROLLER

W H A T I S
E M B E R
B E C O M I N G ?

W H A T E M B E R
I S B E C O M I N G
ROUTER

W H A T E M B E R
B E C O M I N G
ROUTER
GLUE

R O U T E R
G L U E D
C O M P O N E N T S
ROUTER
GLUE
COMPONENTS

H T T P : / / W 3 C . G I T H U B . I O / W E B C O M P
O N E N T S / S P E C / C U S T O M /
W3C Spec

Custom Element Spec Ember
createdCallback init
attatchedCallback didInsertElement
detachedCallback willDestroyElement
attributeChangedCallback * data binding *

– @ W Y C A T S V I A @ M I X O N I C
“Components are
akin to functions
with callbacks”

W H A T I S A C O M P O N E N T
Markup
Javascript

Markup
Javascript
Styles

template
class
css

O R G A N I Z A T I O N
• Use Pods
• Organize components by route where appropriate
• Components can be nested in directories
• Organize Early
• Put styles in pod structure
• https://github.com/ebryn/ember-component-css
• https://github.com/petehunt/jsxstyle

ps://github.com/dockyard/styleguides/blob/master/ember.md#use-pods-structu

// components/sweet-component/component.js
import Ember from 'ember';
export default Ember.Component.extend({
foo: null,
actions: {
save: function() {
this.sendAction('on-save', this.get('foo'));
},
delete: function() {
this.sendAction('on-delete', this.get('foo'));
}
}
});

W R A P P I N G A T H I R D
P A R T Y L I B R A R Y

tagName: 'input',
attributeBindings: ['value'],
classNames: ['date-picker'],
didInsertElement: function() {
var options = {};
var picker = new Pikaday(options);
picker.setDate(this.get('value'), true);
this.set('_picker', picker);
},
willDestroyElement: function() {
this.get('_picker').destroy();
}
});

format: 'YYYY-MM-DD',
didInsertElement: function() {
var self = this;
var options = {
field: this.$()[0],
format: this.get('format'),
onSelect: function() {
Ember.run(function() {
var date = self.get('_picker').getDate();
self.set('value', date);
self.sendAction('on-select', date);
});
}
};

D A T A D O W N - A C T I O N S
U P
Action Checkbox

C O O R D I N A T I N G
C O M P O N E N T S

C O M P O N E N T S
- W I T H B L O C K P A R A M S

//Draggable Item
mouseDown: function() {
this.startDrag();
},
touchStart: function() {
this.startDrag();
}
startDrag: function() {
this.get('canvas').send('startDrag', this.get('dragData'));
}
dragData: Ember.computed(...)
});

H A N D L I N G B R O W S E R E V E N T S
http://emberjs.com/api/classes/Ember.View.html

//Drag Canvas
dragging: false,
touchMove: function() {...},
mouseMove: function() {...}
mouseUp: function() {...},
touchEnd: function() {...}
endDrag: function() {...},
updatePosition: function() {...}
actions: {
startDrag: function(dragData) {
this.setProperties({
dragging: true,
dragData: dragData
});
},
doDrop: function(dropData) {
this.sendAction('on-drop', dropData, this.get('dragData'));
}
}
});

C O M P O N E N T S
- W I T H S E R V I C E S

// services/drag-coordinator.js
canvas: null,
registerCanvas: function() {...},
unregisterCanvas: function() {...}
});

// Any component that needs access to drag canvas
dragCoordinator: Ember.inject.service(),
canvas: Ember.computed.alias('dragCoordinator.canvas')
});

D Y N A M I C C O M P O N E N T S
W I T H { { C O M P O N E N T } }

var title =
{
field: 'title',
component: 'text-search-filter',
placeholder: 'Title',
display: 'Title',
operators: [
{
operator: 'equals',
display: 'Contains'
},
{
operator: 'notEquals',
display: 'Does Not Contain'
}
]
};

H T T P : / / V I C T O R A R I A S . C O M . B R / I M A G E S / D U C K _ T Y P I N G . J P G

T H A N K S F O R
R E M I N D I N G M E
https://github.com/emberjs/ember.js/pull/10461

L O O K ! I P U T A N U N D E R S C O R E I N
F R O N T O F I T

_superSecretInternalState: 'safe and secure',
actions: {
doSomething: function() {
var userValue = this.attrs.someValue;
...
}
}
}
});

E M B E R 2 . 0
export default Ember.Route.extend({
attributes: function(params, queryParams) {
return {
model: this.model(params);
}
}
});

T O O M A N Y O F M Y C O M P O N E N T S
tagName: 'span',
classNames: ['sweet-component']
attributeBindings: ['some-attribute']
actions: {
save: function() {
this.sendAction('save')
}
}
}
});

E L E M E N T A N D F R A G M E N T R F C

T A G L E S S C O M P O N E N T = = =
F R A G M E N T

C O M B I N E D W I T H B E T T E R A C T I O N
H A N D L I N G
http://emberjs.jsbin.com/rwjblue/394/edit?html,js,output

A L L T H E O T H E R R O A D T O 2 . 0
S T U F F
• Road to 2.0 RFC
• Routable Components RFC
• Elements and Fragments RFC
• Erik is impatient

R E C A P
• Components are Ember’s vision of custom elements
today
• They simplify the learning curve of ember allowing a
unified interface for getting content and behaviors for UI.
• Organize Early
• Favor data down actions up
• You can coordinate between components to build
complex but compassable interfaces

R E C A P
• Use the {{component}} helper when you need to choose
a component at run time.
• Be on the lookout for sweet new features in Glimmer
and Ember 2.0 which are just around the corner.

T H A N K S !
@raytiley (github & twitter)
raytiley@gmail.com

{{components deepDive=true}}

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to {{components deepDive=true}} (20)

Recently uploaded (20)

{{components deepDive=true}}

Editor's Notes