Widget

Widget

A widget is responsible for creating and updating own dom elements. It has events for different situations in the dom update cycle. All methods have access to a stateful this.

Widgets are perfect for integrating existing Javascript libraries into an odojs project.

Create a widget by passing a specification to the widget method. A render method that returns a browser dom element, or virtual dom elements is required, all other methods are options.

var Leaflet = widget({
  render: function() {
    return dom('div#map');
  },
  afterMount: function(el, state) {
    this.map = L.map(el).setView([state.lat, state.lng], state.zoom);
    var tiles = L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg', {
      subdomains: '1234'
    });
    tiles.addTo(this.map);
    this.map.on('moveend', (function(_this) {
      return function() {
        var center = _this.map.getCenter();
        var zoom = _this.map.getZoom();
        var location = { lat: center.lat, lng: center.lng, zoom: zoom };
        hub.emit('leaflet moved to {lat}/{lng}/{zoom}', location);
      };
    })(this));
  },
  update: function(el, state) {
    // return a different dom element to replace the dom
    return el;
  },
  onUpdate: function(el, state) {
    this.map.setView([state.lat, state.lng], state.zoom);
  },
  beforeUnmount: function(el, state) {
    this.map.remove();
  }
});

// widgets can't be mounted directly, but can be used inside Components
var App = component({
  render: function(state) {
    return dom('div', [Leaflet(state)]);
  }
});

var scene = App.mount(document.body, { lat: 51, lng: 0, zoom: 8 });

vdom Widget(state, params)

Renders a representation of the widget in virtual dom. Normally only used within a Component.

vdom or dom = WidgetSpec.render(state, params)

The same as Component, this method is passed state and expected to return either a browser dom element or virtual dom element. This is the only required method.

WidgetSpec.afterMount(el, state, params)

Called after the element returned by render has been appended to the browser dom. This is the place to pass the element to other Javascript libraries, or attach manual event handlers.

vdom or dom = WidgetSpec.update(el, state, params)

Called during update. All properties on the old widget have been copied across and are available. A browser dom element or virtual dom element can be returned from this method to replace the existing dom element. Return null or el for no change.

WidgetSpec.onUpdate(el, state, params)

Called during update after update if it exists. All properties on the old widget have been copied across and are available and el will reflect any updates from update

WidgetSpec.beforeUnmount(el)

Called just before the widget is removed from the browser dom. Can be used to unbind and cleanup anything else other Javascript code has been using.