Successfully reported this slideshow.

Fun with Ember 2.x Features

0

Share

Loading in …3
×
1 of 25
1 of 25

Fun with Ember 2.x Features

0

Share

Download to read offline

Discussion of great new features in Ember 2.x. In this talk, I discuss composability, ember wormhole, and yielded actions. This talk also includes a demo application on github to see an example of all the concepts

Discussion of great new features in Ember 2.x. In this talk, I discuss composability, ember wormhole, and yielded actions. This talk also includes a demo application on github to see an example of all the concepts

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Fun with Ember 2.x Features

  1. 1. BY BEN LIMMER FUN WITH NEW EMBER 2.X FEATURES
  2. 2. COMPOSABILITY IS AWESOME
  3. 3. FULLSCREEN CONFIRM
  4. 4. YIELDED ACTIONS + COMPOSABLE HELPERS + WORMHOLE
  5. 5. YIELDED ACTIONS + COMPOSABLE HELPERS + WORMHOLE
  6. 6. WORMHOLE
  7. 7. RENDER A CHILD VIEW SOMEWHERE ELSE IN THE DOM. - yapplabs EMBER WORMHOLE
  8. 8. <body> <div id='somewhere-else'></div> <div class='my-ember-app'> {{#my-component}} {{#ember-wormhole to='somewhere-else'}} <h1>I'm free!</h1> {{/ember-wormhole}} {{/my-component}} </div> </body>
  9. 9. YIELDED ACTIONS + COMPOSABLE HELPERS + WORMHOLE
  10. 10. COMPOSABLE HELPERS
  11. 11. COMPOSABLE HELPERS FOR DECLARATIVE TEMPLATING IN EMBER - dockyard EMBER COMPOSABLE HELPERS
  12. 12. <button {{action (pipe addToCart purchase redirectToThankYouPage) item}}> Buy Stuff! </button>
  13. 13. YIELDED ACTIONS + COMPOSABLE HELPERS + WORMHOLE
  14. 14. YIELDED ACTIONS
  15. 15. {{#each users as |user|}} {{yield user}} {{/each}} {{#user-list users=users as |user|}} {{user-card user=user}} {{/user-list}} USER-LIST.HBS USERS.HBS
  16. 16. FULLSCREEN CONFIRM
  17. 17. {{#if showModal}} {{#ember-wormhole to='fullscreen-modal-container'}} <div class='modal-contents'> <h1>You sure??</h1> <div class='buttons-container'> <button {{action 'cancel'}} class='btn large cancel'>Nevermind</button> <button {{action 'confirm'}} class='btn large confirm primary'>Do it!</button> </div> </div> {{/ember-wormhole}} {{/if}} {{yield (action 'showModal')}}
  18. 18. export default Ember.Component.extend({ showModal: false, confirmPromise: null, actions: { showModal() { const deferredPromise = Ember.RSVP.defer(); this.setProperties({ 'showModal': true, 'confirmPromise': deferredPromise, }); return deferredPromise.promise; }, confirm() { const deferredPromise = this.get('confirmPromise'); if (deferredPromise) { deferredPromise.resolve(); } this.setProperties({
  19. 19. confirm() { const deferredPromise = this.get('confirmPromise'); if (deferredPromise) { deferredPromise.resolve(); } this.setProperties({ 'showModal': false, 'confirmPromise': null, }); }, cancel() { const deferredPromise = this.get('confirmPromise'); if (deferredPromise) { deferredPromise.reject(); } this.setProperties({ 'showModal': false, 'confirmPromise': null, });
  20. 20. {{#fullscreen-confirm as |userDidConfirm|}} <button {{action (pipe userDidConfirm (action doSomethingScary))}}> Something scary... </button> {{/fullscreen-confirm}}
  21. 21. DEMO
  22. 22. THANKS! SOURCE CODE

×