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
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
私の後悔をAWS DMSで解決した話
hiramax
4
210
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
350
はじめてのMaterial3 Expressive
ym223
2
900
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
170
Ruby Parser progress report 2025
yui_knk
1
460
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
780
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.9k
Music & Morning Musume
bryan
46
6.8k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Designing Experiences People Love
moore
142
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
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