cornea is a simple view manager inspired by backbonejs to help you organise your code.

• DOM event organiser
• testable methods
• compatible with any kind of templates (string and nodes)
• elements/attributes/properties binding (with micro-templates)
• dynamic stylesheet modification for high performance
• class-event for modules communication
• no zombie-view
• creation and destruction hooks
• 4k minified and gzip

$ npm install cornea

var cornea = require("cornea")

Creates a subclass. Useful for sharing common handlers.

Creates a cornea view. Binds events.

Unbinds the events.

Renders the given template into view.element.

Returns a binding object for the given key.

Object for template data, bindings relate to it.

cornea.extend({
  getInitialData : function(){
    return {
      foo : "bar"
    }
  }
})

Updates data with the keys and values in object.

Sets the style for the given selector with the properties.

properties should be written like {"font-size":"3em"}.

Passing null as a value resets the property to its defaults.

Styles are scoped to the view.

cornea have a cornea.DOM object containing methods to create elements.

e.g.

cornea.DOM.div(null) // <div></div>
cornea.DOM.div({className:"foo"}) // <div class="foo"></div>
cornea.DOM.div(null, "foo") // <div>foo</div>
cornea.DOM.div(null, "foo", cornea.DOM.span(null)) // <div>foo<span></span></div>

creates a binding.

cornea.DOM.div(null, this.binding("value"))

• escape (default to false)
• transform (default, function(a){return a})

String or Node, optional. View root. If not defined, an empty <div> will be created.

Function, optional (default : -> "").

Template called on .render. Should return a string or a node.

Function, optional. Code to execute when the view.create method is called. Its thisValue is the current view and its arguments are the one passed to view.create.

note The first .create argument is though reserved to the view extension.

Function, optional. Code to execute when the view.destroy method is called.

Array, optional. List of events to bind.

• type String, event type (e.g. click)
• selector String (optional), delegation selector
• listener String, name of the view's method to bind
• capture Boolean (optional, default: false), useCapture flag.

note : if view.listener changes, it will affect the event callback (a hook is set and fetches the right method)

NOTE : These are cornea events, not DOM ones. This is mainly app communication.

listens the the type event and attaches listener to it.

stops listening :

• if no argument is set : all events
• if type is set : all type events
• if type and listener are set : the listener for this type

fires synchronously the given type event, passing the data… arguments to the listeners.

/** @jsx cornea.DOM */
var cornea = require("cornea")
var app = require("./app")

module.exports = cornea.extend({
  element : ".Lightbox",
  initialize : function(){
    var lightbox = this
    app.on("lightbox:show", function(data){
      lightbox.update("value", data)
      lightbox.show()
    })
  },
  getInitialData : function(){
    return {
      value : ""
    }
  },
  events : [
    {
      type : "click",
      selector : ".js-close",
      listener : "hide"
    }
  ],
  hide : function(){
    this.element.classList.remove("Lightbox--visible")
  },
  show : function(left, top){
    this.element.classList.add("Lightbox--visible")
    this.setStyle(".Lightbox-lightbox", {
      "top" : top + "px",
      "left" : left + "px"
    })
    this.emit("lightbox:show")
  },
  template : function(data){
    return (
       <div>
        <div className="Lightbox-overlay" />
        <div className="Lightbox-lightbox">
          <button className="Lightbox-close js-Close">
            {"&times;"}
          </button>
          <div className="Lightbox-content">
            {this.binding("value")}
          </div>
        </div>
      </div>
    )
  }
})

and init your view :

var view = require("./myView")
var otherView = require("./otherView").create()

var myView = view.create()
myView.render()
myView.update({
  value : "oh hai"
})
myView.on("lightbox:show", function(){
  otherView.hide()
})