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
79
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
170
Icons and the Web: Symbols of the Modern Age
timgthomas
0
150
Constructing Modern UIs with SVG
timgthomas
0
160
Browser Invasion: Desktop Apps and the Web
timgthomas
0
130
Mind the Gap: Bringing Designers and Developers Together
timgthomas
0
99
Zero to App Store: A Hybrid App’s Tale
timgthomas
1
130
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
110
Ember ATX: Ember.Evented
timgthomas
0
110
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
350
Other Decks in Programming
See All in Programming
DataStoreをテストする
mkeeda
0
280
生成AIを使ったQAアプリケーションの作成 - ハンズオン補足資料
oracle4engineer
PRO
3
180
PHP で学ぶ OAuth 入門
azuki
1
110
[NG India] Event-Based State Management with NgRx SignalStore
markostanimirovic
0
100
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
3
1.9k
AHC 044 混合整数計画ソルバー解法
kiri8128
0
320
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
1.3k
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
820
AHC045_解説
shun_pi
0
440
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
180
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
470
5年間継続して開発した自作OSSの記録
bebeji_nappa
0
140
Featured
See All Featured
Building Adaptive Systems
keathley
41
2.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Adopting Sorbet at Scale
ufuk
76
9.3k
Optimizing for Happiness
mojombo
377
70k
Embracing the Ebb and Flow
colly
85
4.6k
What's in a price? How to price your products and services
michaelherold
245
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
29
2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
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