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
emberjs
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
mmr
February 20, 2014
1
220
emberjs
sarma ruby meetup, Feb 2014
mmr
February 20, 2014
Tweet
Share
More Decks by mmr
See All by mmr
rails decorators
mribica
0
79
make your own gem
mribica
0
110
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
187
22k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
380
Visualization
eitanlees
150
17k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
140
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
170
WCS-LA-2024
lcolladotor
0
440
Done Done
chrislema
186
16k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
0
1.1k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
320
Claude Code のすすめ
schroneko
67
210k
Ethics towards AI in product and experience design
skipperchong
2
190
Transcript
Sarma Feb, 2014
• @mribica • https://github.com/mribica/twtr
Ember.js • client-side MVC framework for creating ambitious web applications
Tradicionalni web • req • full page response • req
• full page response
Ajax • req • full page response • ajax req
• partial response
Pjax/Turbolinks • req na server • full page response •
ajax req • page body response
SPA • req na server • full page response •
ajax req • response.json (client-side rendering)
Ember.js • url driven aplikacija • discourse • demo •
MVC
MVC • App.Router • Em.Route • DS.Model ili Em.Object •
ArrayController, ObjectController • Template • Em.View
Model # models/tweet.js.coffee App.Tweet = DS.Model.extend body: DS.attr(‘text’) favorite: DS.attr(‘boolean’)
createdAt: DS.attr(‘date’)
View (Template) # templates/tweet.handlebars <div class=”tweet”> <small> {{moment}} </small> <p>
{{body}} </p> </div>
View (Em.View) # views/tweet_view.js.coffee App.TweetView = Em.View.extend templateName: ‘tweet’ didInsertElement:
-> # neki kod koji se treba izvrsiti nakon # ubacivanja tweet-a u DOM
View (Em.View) # views/tweet_area_view.js.coffee App.TweetView = Em.TextArea.extend escape: -> #
logika kada se pritisne esc key @sendAction ‘cancel’
Controller # controllers/tweet_controller.js.coffee App.TweetController = Em.ObjectController moment:(-> moment(@get(‘createdAt’)).fromNow() ).property()
Controller # controllers/tweets_controller.js.coffee App.TweetsNewController = Em.ObjectController action: save: -> #
logika za spremanje tweeta
App.Router # router.js.coffee App.Router.map -> @resource ‘tweets’, -> @route ‘new’
Em.Route # tweets_route.js.coffee App.TweetsRoute = Em.Route.extend # model hook model:
-> @store.find(‘tweet’)
Em.Route # tweets_route.js.coffee App.TweetsNewRoute = Em.Route.extend # model hook model:
-> @store.createRecord ‘tweet’
Em.Route • beforeModel(params,) • model(params) • afterModel(params) • setupController(controller, model)
Demo