Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Managing Modals and other non-URL based views i...

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

Asha Elizabeth Gupta

January 24, 2013
Tweet

More Decks by Asha Elizabeth Gupta

Other Decks in Programming

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. 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
  4. 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
  5. 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
  6. 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
  7. modalView.js didInsertElement is called every time the modalView is created.

    Take advantage of this to open the modal in this function
  8. 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
  9. How do you Handle Modals, Drawers or Other similar Views?

    will things Change with the New Router?