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
73
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
93
Icons and the Web: Symbols of the Modern Age
timgthomas
0
96
Constructing Modern UIs with SVG
timgthomas
0
120
Browser Invasion: Desktop Apps and the Web
timgthomas
0
97
Mind the Gap: Bringing Designers and Developers Together
timgthomas
0
69
Zero to App Store: A Hybrid App’s Tale
timgthomas
1
96
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
80
Ember ATX: Ember.Evented
timgthomas
0
80
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
270
Other Decks in Programming
See All in Programming
Netty Chicago Java User Group 2024-04-17
sullis
0
180
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
270
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
0
240
Ruby GitHub Packages
bkuhlmann
0
630
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
180
Rethinking UI building strategies @ SFI 2024
letelete
0
270
Elm 0.19.0 Changes
bkuhlmann
0
490
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
使ってみよう Azure AI Document Intelligence
kosmosebi
2
310
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
260
ゆるい個人開発のススメ
kuroppe1819
10
990
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Six Lessons from altMBA
skipperchong
21
3k
A Tale of Four Properties
chriscoyier
151
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Teambox: Starting and Learning
jrom
128
8.4k
Building Adaptive Systems
keathley
31
1.9k
Product Roadmaps are Hard
iamctodd
44
9.7k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Debugging Ruby Performance
tmm1
70
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
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