Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Ember ATX: Components
timgthomas
May 29, 2015
Programming
0
67
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
72
Icons and the Web: Symbols of the Modern Age
timgthomas
0
68
Constructing Modern UIs with SVG
timgthomas
0
100
Browser Invasion: Desktop Apps and the Web
timgthomas
0
78
Mind the Gap: Bringing Designers and Developers Together
timgthomas
0
58
Zero to App Store: A Hybrid App’s Tale
timgthomas
1
87
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
69
Ember ATX: Ember.Evented
timgthomas
0
59
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
250
Other Decks in Programming
See All in Programming
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
240
花き業界のサプライチェーンを繋げるプロダクト開発の進め方
userlike1
0
130
OIDC仕様に準拠した Makuake ID連携基盤構築の裏側
ymtdzzz
0
240
Swift Observation
shiz
3
270
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
200
NGK2023S - OCaml最高! スマホ開発にも使えちゃう?!
haochenxie
0
110
Glance App Widgetでウィジェットを作ろう / MoT TechTalk #15
mot_techtalk
0
110
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
なぜRubyコミュニティにコミットするのか?
luccafort
0
300
Amazon QuickSightのアップデート -re:Invent 2022の復習&2022年ハイライト-
shogo452
0
200
LIFFで動く割り勘アプリTATEKAをリリースしてみた話
inoue2002
0
220
Functional Data Engineering - A Blueprint for adopting functional principles in data pipeline
vananth22
0
170
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Designing on Purpose - Digital PM Summit 2013
jponch
108
5.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.5k
WebSockets: Embracing the real-time Web
robhawkes
58
6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
Automating Front-end Workflow
addyosmani
1351
200k
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
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