Fun with Ember 2.x Features
•0 likes•870 views
Report
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
Recommended
More Related Content
Recently uploaded
Recently uploaded(20)
Featured
Featured(20)
Fun with Ember 2.x Features
- 1. BY BEN LIMMER FUN WITH NEW EMBER 2.X FEATURES
- 9. WORMHOLE
- 10. RENDER A CHILD VIEW SOMEWHERE ELSE IN THE DOM. - yapplabs EMBER WORMHOLE
- 11. <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>
- 14. COMPOSABLE HELPERS FOR DECLARATIVE TEMPLATING IN EMBER - dockyard EMBER COMPOSABLE HELPERS
- 15. <button {{action (pipe addToCart purchase redirectToThankYouPage) item}}> Buy Stuff! </button>
- 17. YIELDED ACTIONS
- 18. {{#each users as |user|}} {{yield user}} {{/each}} {{#user-list users=users as |user|}} {{user-card user=user}} {{/user-list}} USER-LIST.HBS USERS.HBS
- 20. {{#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')}}
- 21. 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({
- 22. 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, });
- 23. {{#fullscreen-confirm as |userDidConfirm|}} <button {{action (pipe userDidConfirm (action doSomethingScary))}}> Something scary... </button> {{/fullscreen-confirm}}
- 24. DEMO