fun with ember 2.x features
TRANSCRIPT
BY BEN LIMMERFUN WITH NEW EMBER 2.X FEATURES
COMPOSABILITY IS AWESOME
FULLSCREEN CONFIRM
YIELDED ACTIONS+
COMPOSABLE HELPERS +
WORMHOLE
YIELDED ACTIONS+
COMPOSABLE HELPERS +
WORMHOLE
WORMHOLE
RENDER A CHILD VIEW SOMEWHERE ELSE IN THE DOM.
- yapplabs
EMBER WORMHOLE
<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>
YIELDED ACTIONS+
COMPOSABLE HELPERS +
WORMHOLE
COMPOSABLE HELPERS
COMPOSABLE HELPERS FOR DECLARATIVE TEMPLATING IN EMBER
- dockyard
EMBER COMPOSABLE HELPERS
<button {{action (pipe addToCart purchase redirectToThankYouPage) item}}> Buy Stuff!</button>
YIELDED ACTIONS+
COMPOSABLE HELPERS +
WORMHOLE
YIELDED ACTIONS
{{#each users as |user|}} {{yield user}}{{/each}}
{{#user-list users=users as |user|}} {{user-card user=user}}{{/user-list}}
USER-LIST.HBS
USERS.HBS
FULLSCREEN CONFIRM
{{#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')}}
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({ 'showModal': false,
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, }); },
{{#fullscreen-confirm as |userDidConfirm|}} <button {{action
(pipe userDidConfirm (action doSomethingScary))}}> Something scary... </button>{{/fullscreen-confirm}}
