Shiny.js proof of concept

gistfile1.txt

Everytime a HTML tag has the [as=*] attribute, Shiny will instantiate a Javascript object on the fly. It's not instantiate until it reaches the main Document. So you can manipulate it off screen and the object will only be created once it's appended to the document.


No need to check for document ready or page:load(turbolinks), everything is instantiated as soon as a valid DOM is found. 

popup.coffee

class Popup
  # el is <div class='popup'>
  constructor: (el) ->
    el.addEventListener 'click', @close
    
  close: (event) ->
    if event.target.classList.contains('close')
      event.currentTarget.remove()
    
Shiny.Models.add Popup, 'MyProject.Popup'

section.coffee

class Section
  # el is <section>
  constructor: (el) ->
    #set your listener here. You could add a listener here and block propagation to avoid the popup to close, etc.
    
Shiny.Models.add Section, 'MyProject.Section'

view.html

<!-- A popup -->
<div class='popup' as="MyProject.Popup">
  <section as='MyProject.Section'>
    <!-- Some stuff in here -->
  </section>
</div>