jquery-widget's Introduction

jQuery Widget

jQuery Widget Factory is a small framework for building UI components, really gorgeous.

From now it can be used as an independent view component as React with the support of JSX and virtual dom, this makes it more adaptable than before.

It's easy to integrate it with flux/redux workflow, checkout the examples of todomvc.

Difference to the original implementation

The option() is also used to manage the component state
The render() is added to render the component, the original constructor argument called element isn't needed
Support JSX and virtual dom, the createWidget() is used to create virtual dom tree
Make the widget class local, remove the namespace and the global reference such as jQuery.ui
Remove the feature of class redefining

Example from flux-todomvc

var Footer = require('./Footer');
var Header = require('./Header');
var MainSection = require('./MainSection');
var createWidget = require('jquery-widget');
var TodoStore = require('../stores/TodoStore');

/**
 * Retrieve the current TODO data from the TodoStore
 */
function getTodoState() {
  return {
    allTodos: TodoStore.getAll(),
    areAllComplete: TodoStore.areAllComplete()
  };
}

var TodoApp = createWidget('TodoApp', {

  _getCreateOptions: getTodoState,

  _create: function() {
    this._on(TodoStore, {
        'change': '_onChange'
    });
  },

  /**
   * @return {object}
   */
  render: function() {
    return (
      <div>
        <Header />
        <MainSection
          allTodos={this.options.allTodos}
          areAllComplete={this.options.areAllComplete}
        />
        <Footer allTodos={this.options.allTodos} />
      </div>
    );
  },

  /**
   * Event handler for 'change' events coming from the TodoStore
   */
  _onChange: function() {
    this.option(getTodoState());
  }

});

module.exports = TodoApp;