emberjs

sarma ruby meetup, Feb 2014

Transcript

1. Sarma Feb, 2014
2. • @mribica • https://github.com/mribica/twtr
3. Ember.js • client-side MVC framework for creating ambitious web applications
4. Tradicionalni web • req • full page response • req • full page response
5. Ajax • req • full page response • ajax req • partial response
6. Pjax/Turbolinks • req na server • full page response • ajax req • page body response
7. SPA • req na server • full page response • ajax req • response.json (client-side rendering)
8. Ember.js • url driven aplikacija • discourse • demo • MVC
9. MVC • App.Router • Em.Route • DS.Model ili Em.Object • ArrayController, ObjectController • Template • Em.View
10. Model # models/tweet.js.coffee App.Tweet = DS.Model.extend body: DS.attr(‘text’) favorite: DS.attr(‘boolean’) createdAt: DS.attr(‘date’)
11. View (Template) # templates/tweet.handlebars <div class=”tweet”> <small> {{moment}} </small> <p> {{body}} </p> </div>
12. 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
13. View (Em.View) # views/tweet_area_view.js.coffee App.TweetView = Em.TextArea.extend escape: -> # logika kada se pritisne esc key @sendAction ‘cancel’
14. Controller # controllers/tweet_controller.js.coffee App.TweetController = Em.ObjectController moment:(-> moment(@get(‘createdAt’)).fromNow() ).property()
15. Controller # controllers/tweets_controller.js.coffee App.TweetsNewController = Em.ObjectController action: save: -> # logika za spremanje tweeta
16. App.Router # router.js.coffee App.Router.map -> @resource ‘tweets’, -> @route ‘new’
17. Em.Route # tweets_route.js.coffee App.TweetsRoute = Em.Route.extend # model hook model: -> @store.find(‘tweet’)
18. Em.Route # tweets_route.js.coffee App.TweetsNewRoute = Em.Route.extend # model hook model: -> @store.createRecord ‘tweet’
19. Em.Route • beforeModel(params,) • model(params) • afterModel(params) • setupController(controller, model)
20. Demo