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;

Installation with npm

npm install --save jquery-widget

Reference

• jQuery widget factory
• virtual-dom
• flux-todomvc
• redux-todomvc

License

Copyright (c) 2016 viclm

Licensed under the MIT license.