Download as PDF, PPTX
Uploaded byBen Limmer
Fun with Ember 2.x Features
The document discusses new features in Ember 2.x, focusing on composability, including the use of wormhole and yielded actions. It demonstrates practical applications such as creating a fullscreen confirm modal, composable helpers for templating, and managing state with promises. The examples illustrate how to render components and handle user interactions effectively within the Ember framework.
Fun with Ember 2.x Features
- 1. BY BEN LIMMER FUNWITH NEW EMBER 2.X FEATURES
- 2.
- 5.
- 6.
- 8.
- 9.
- 10. RENDER A CHILDVIEW SOMEWHERE ELSE IN THE DOM. - yapplabs EMBER WORMHOLE
- 11. <body> <div id='somewhere-else'></div> <div class='my-ember-app'> {{#my-component}} {{#ember-wormholeto='somewhere-else'}} <h1>I'm free!</h1> {{/ember-wormhole}} {{/my-component}} </div> </body>
- 12.
- 13.
- 14. COMPOSABLE HELPERS FOR DECLARATIVETEMPLATING IN EMBER - dockyard EMBER COMPOSABLE HELPERS
- 15. <button {{action (pipe addToCartpurchase redirectToThankYouPage) item}}> Buy Stuff! </button>
- 16.
- 17.
- 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
- 19.
- 20. {{#if showModal}} {{#ember-wormhole to='fullscreen-modal-container'}} <divclass='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.
- 25.