Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Ember ATX: Components
timgthomas
May 29, 2015
Programming
0
65
Ember ATX: Components
An introduction to Ember's Components
timgthomas
May 29, 2015
Tweet
Share
More Decks by timgthomas
See All by timgthomas
timgthomas
0
38
timgthomas
0
46
timgthomas
0
59
timgthomas
0
52
timgthomas
0
46
timgthomas
1
67
timgthomas
0
43
timgthomas
0
51
timgthomas
0
230
Other Decks in Programming
See All in Programming
bkuhlmann
2
310
boriswilhelms
0
120
legalforce
PRO
0
630
danilop
1
730
naokioouchi
1
280
heistak
2
130
madai0517
1
190
legalforce
PRO
1
700
alperhankendi
1
140
manfredsteyer
PRO
0
250
koheisakata
0
100
meemeelab
0
290
Featured
See All Featured
destraynor
146
19k
dougneiner
55
5.4k
edds
56
9.4k
pauljervisheath
195
15k
iamctodd
19
2k
dotmariusz
94
5.5k
denniskardys
219
120k
holman
461
280k
bryan
100
11k
qrush
285
19k
kneath
294
39k
eitanlees
112
10k
Transcript
Components
Tim G. Thomas @timgthomas timgthomas.com
Components
{{ember-atx}}
Controller + View (+ Template) Route-less
Why?
Using Components
{{ember-atx}}
/* ember-atx.hbs */ <h1>‚</h1> /* elsewhere... */ {{ember-atx}}
/* ember-atx.hbs */ <h1>‚</h1> /* In 1.13... */ <ember-atx>
export default Ember.Component.extend({ });
export default Ember.Component.extend({ didInsertElement() { // I'm a view! }
});
export default Ember.Component.extend({ didInsertElement() { this.$().fadeOut(); } });
export default Ember.Component.extend({ itemCount: function() { // No, wait...I'm a
Controller! }.property() });
export default Ember.Component.extend({ itemCount: function() { return this.get('items'); }.property('items') });
{{ember-atx items=model}}
export default Ember.Component.extend({ items: function() { return Ember.$ .getJSON('/dont/tell/anyone'); }.property()
});
<ember-atx foo={{action 'attend'}}> foo: 'bar', actions: { somethingHappened() { this.attrs.foo.call({});
} }
<ember-atx attend={{action 'attend'}}>
<p>{{yield}}</p> {{#ember-atx}} I'm a lumberjack and I'm okay... {{/ember-atx}}
{{component 'component-name'}}
guides.emberjs.com ember-components.com timgthomas.com Don't go here!
Thanks! @timgthomas