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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
timgthomas
May 29, 2015
Programming
0
87
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
240
Icons and the Web: Symbols of the Modern Age
timgthomas
0
170
Constructing Modern UIs with SVG
timgthomas
0
200
Browser Invasion: Desktop Apps and the Web
timgthomas
0
160
Mind the Gap: Bringing Designers and Developers Together
timgthomas
0
130
Zero to App Store: A Hybrid App’s Tale
timgthomas
1
150
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
130
Ember ATX: Ember.Evented
timgthomas
0
120
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
390
Other Decks in Programming
See All in Programming
re:Invent 2025 のイケてるサービスを紹介する
maroon1st
0
170
DevFest Android in Korea 2025 - 개발자 커뮤니티를 통해 얻는 가치
wisemuji
0
190
[AI Engineering Summit Tokyo 2025] LLMは計画業務のゲームチェンジャーか? 最適化業務における活⽤の可能性と限界
terryu16
2
520
高速開発のためのコード整理術
sutetotanuki
1
330
CSC307 Lecture 02
javiergs
PRO
1
770
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2k
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
cloverrose
2
500
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
izumin5210
6
1.7k
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
170
HTTPプロトコル正しく理解していますか? 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ニャ〜
hekuchan
2
660
Basic Architectures
denyspoltorak
0
630
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
kamina_zzz
0
390
Featured
See All Featured
The Mindset for Success: Future Career Progression
greggifford
PRO
0
220
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
110
sira's awesome portfolio website redesign presentation
elsirapls
0
130
What does AI have to do with Human Rights?
axbom
PRO
0
1.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
Speed Design
sergeychernyshev
33
1.5k
Paper Plane (Part 1)
katiecoart
PRO
0
3.5k
ラッコキーワード サービス紹介資料
rakko
1
2.1M
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
190
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
59
Balancing Empowerment & Direction
lara
5
850
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
2.9k
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