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
190
Icons and the Web: Symbols of the Modern Age
timgthomas
0
150
Constructing Modern UIs with SVG
timgthomas
0
170
Browser Invasion: Desktop Apps and the Web
timgthomas
0
140
Mind the Gap: Bringing Designers and Developers Together
timgthomas
0
110
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
360
Other Decks in Programming
See All in Programming
GoのWebAssembly活用パターン紹介
syumai
3
10k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
130
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
490
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
530
エンジニア向け採用ピッチ資料
inusan
0
150
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
320
技術同人誌をMCP Serverにしてみた
74th
0
140
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
270
A comprehensive view of refactoring
marabesi
0
970
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
43
29k
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.8k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Bash Introduction
62gerente
614
210k
How to train your dragon (web standard)
notwaldorf
92
6.1k
It's Worth the Effort
3n
184
28k
GraphQLとの向き合い方2022年版
quramy
46
14k
4 Signs Your Business is Dying
shpigford
184
22k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
What's in a price? How to price your products and services
michaelherold
246
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
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