vd-render

Renders a vd view to the DOM.

API

render(DOMElement target) : Function paint(vd.Element view)

Returns a paint function that applies the given view to the DOM target.

Event

An Event exposes all the properties of the DOMEvent it wraps, with the following additons.

DOMEvent originalEvent
Boolean stopped
isPropagationStopped()

Event system

Every property associated to an vd node that starts with on registers an event handler that gets mapped to the eventual rendered DOM node.

The events are delegated and registered only on the target element supplied to the render function above.

The event handler functions receive a synthetic Event object that wraps the native DOM event. Methods like stopPropagation and preventDefault enabled by this wrapper work as if the event handler had been attached directly on the DOM node.

import dom from 'vd';
dom('div', { onclick: fn });

Special events

Some events are captured by vd-render and handled specially in order to dynamically control the rendering behavior.

onremove

If an element supplies an onremove attribute, the corresponding function will be called when the element would be removed from the DOM.

This allows for straightforwardanimation behavior upon removal of a node:

dom('div', { onremove: animate });
function animate(el, fn){
  el.classList.add('animate');
 
  // the element will _actually_
  // be disposed in 1 second
  setTimeout(fn, 1000);
}

License

MIT