Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Ember ATX: Components
Search
timgthomas
May 29, 2015
Programming
0
82
Ember ATX: Components
An introduction to Ember's Components
timgthomas
May 29, 2015
Tweet
Share
More Decks by timgthomas
See All by timgthomas
Living Style Guides: Bringing Designers and Developers Together
timgthomas
0
200
Icons and the Web: Symbols of the Modern Age
timgthomas
0
160
Constructing Modern UIs with SVG
timgthomas
0
180
Browser Invasion: Desktop Apps and the Web
timgthomas
0
150
Mind the Gap: Bringing Designers and Developers Together
timgthomas
0
120
Zero to App Store: A Hybrid App’s Tale
timgthomas
1
140
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
120
Ember ATX: Ember.Evented
timgthomas
0
110
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
370
Other Decks in Programming
See All in Programming
CSC305 Summer Lecture 05
javiergs
PRO
0
100
Webinar: AI-Powered Development: Transformiere deinen Workflow mit Coding Tools und MCP Servern
danielsogl
0
140
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
300
実践 Dev Containers × Claude Code
touyu
1
220
Infer入門
riru
4
1.5k
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
1
210
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
180
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
410
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.5k
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
パスタの技術
yusukebe
1
390
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
440
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
Balancing Empowerment & Direction
lara
2
580
Facilitating Awesome Meetings
lara
55
6.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Six Lessons from altMBA
skipperchong
28
4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to train your dragon (web standard)
notwaldorf
96
6.2k
A Tale of Four Properties
chriscoyier
160
23k
Adopting Sorbet at Scale
ufuk
77
9.5k
Faster Mobile Websites
deanohume
309
31k
Why Our Code Smells
bkeepers
PRO
338
57k
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