cornea real-world example

app.js

module.exports = require("bloody-events").create()

global.js

var cornea = require("cornea")
  , request = require("bloody-request")
  , app = require("./app")

module.exports = cornea.extend({
  element : document.documentElement,
  events : [
    {
      type : "click",
      selector : ".js-Lightbox",
      listener : "showLightbox"
    }
  ],
  showLightbox : function(eventObject, target){
    var url = target.getAttribute("data-url")
    request.create(url)
      .load()
      .then(function(xhr){
        app.fire("lightbox:show", xhr.responseText)
      })
  }
})

lightbox.js

var cornea = require("cornea")
  , app = require("./app")

module.exports = cornea.extend({
  element : ".Lightbox",
  initialize : function(){
    var lightbox = this
    app.listen("lightbox:show", function(data){
      lightbox.update("value", data)
      lightbox.show()
    })
  },
  events : [
    {
      type : "click",
      selector : ".js-close",
      listener : "hide"
    }
  ],
  hide : function(){
    this.element.classList.remove("Lightbox--visible")
  },
  show : function(){
    this.element.classList.add("Lightbox--visible")
  },
  template : function(data){
    return [
      "<div class='Lightbox-overlay'></div>",
      "<div class='Lightbox-lightbox'>",
        "<button class='Lightbox-close js-Close'>&times;</button>",
          this.binding("value").toString({
            className : "Lightbox-content",
            escape : false,
            nodeName : "div"
          }),
      "</div>"
    ].join("")
  },
  data : {
    value : ""
  }
})