Managing Modals and other non-URL based views in Ember.js

How to use an independent stateManager to manage a complicated non-URL based view in Ember.js

Transcript

1. Hi, I’m ASHA. I Build CUstomer.io We make it easy for marketers to build complicated email campaigns #MADEWITHEMBER
2. HOW TO HANDLE COMPLICATED VIEWS THAT DON’t HAVE THEIR OWN URL MODALS DRAWERS Today I’m going to talk about: i.e., THE VIEW IS NOT A ROUTE WITHIN YOUR ROUTER, BUT IT HAS STATE, And MAYBE ITS OWN TRANSACTION or MODEL
3. TAKE AN EXAMPLE: CAMPAIGN VIEW in the CAMPAIGN ROUTE CLICKING an ITEM OPENS A DRAFT IN A MODAL
4. Pretty Complex - UPDATES A MODEL - HAS STATE (OPen, CLOSED) - HAS ITS OWN TRANSACTION TAKE AN EXAMPLE: CAMPAIGN VIEW in the CAMPAIGN ROUTE CLICKING an ITEM OPENS A DRAFT IN A MODAL
5. WOULD BE NBD IF CAMPAIGNS AND DRAFTS WERE SEPARATE ROUTES IN THE ROUTER...
6. BUT Life is not so easy... BELONG TO THE SAME ROUTE IN THE ROUTER, so We Can’t CONTROL THE MODAL STATE, and CREATE AN INDEPENDENT Transaction FOr the MODAL WITHIN THE ROUTer
7. One SOLUTION Create an independent stateManager that manages the modal
8. CONCEPTUALLY LOOKS SOMETHING LIKE THIS {{outlet modal}} {{action open}} mainView.handlebars modalStateManager.js open: function({ //connectOutlets //create trxn }); exit: function({ //rollback trxn }); - CALLS OPen on the StateMANAGER - HAs modal Outlet - ConnectOutlets - Create Transaction modalView.js modalController.js - RENDER THE TEMPLATE
9. mainView.handlebars Set the target to be the instance of the stateManager(created on the next slide) call function “open” on the stateManager pass the ‘draft’ object to the open function create an outlet where the modal will be inserted into the DOM
10. modalStateManager.js (1/2)
11. modalStateManager.js (2/2)
12. modalView.js didInsertElement is called every time the modalView is created. Take advantage of this to open the modal in this function
13. modalController.js modalView.handlebars set the controller target to be the instance of the stateManager
14. So, in Summary: {{outlet modal}} {{action open}} mainView.handlebars modalStateManager.js open: function({ //connectOutlets //create trxn }); exit: function({ //rollback trxn }); - CALLS OPen on the StateMANAGER - HAs modal Outlet - ConnectOutlets - Create Transaction modalView.js modalController.js - RENDER THE TEMPLATE
15. QUestions? Find me at: asha at Customer.io @ashaegupta
16. How do you Handle Modals, Drawers or Other similar Views? will things Change with the New Router?