Hi, I’m ASHA. I Build CUstomer.io
We make it easy for marketers to build complicated email campaigns
#MADEWITHEMBER
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
TAKE AN EXAMPLE:
CAMPAIGN VIEW in the CAMPAIGN ROUTE
CLICKING an ITEM
OPENS A DRAFT IN A MODAL
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
WOULD BE NBD IF CAMPAIGNS AND DRAFTS WERE SEPARATE
ROUTES IN THE ROUTER...
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
One SOLUTION
Create an independent stateManager that manages the modal
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
modalStateManager.js (1/2)
Slide 11
Slide 11 text
modalStateManager.js (2/2)
Slide 12
Slide 12 text
modalView.js
didInsertElement is
called every time the
modalView is created.
Take advantage of
this to open the
modal in this
function
Slide 13
Slide 13 text
modalController.js
modalView.handlebars
set the controller target to be
the instance of the stateManager
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
QUestions?
Find me at:
asha at Customer.io
@ashaegupta
Slide 16
Slide 16 text
How do you Handle Modals, Drawers or Other similar Views?
will things Change with the New Router?