Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fun with Ember 2.x Features

343 views

Published on

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

Published in: Technology
  • Be the first to like this

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

×