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-widgetReference
License
Copyright (c) 2016 viclm
Licensed under the MIT license.