Widget-JS is a framework that provides routing, events and widgets to javascript apps.
A simple widget can look like:
var counterWidget = function() {
var that = widgetjs.widget();
var count = 0;
that.renderContentOn = function(html) {
html.h1(count.toString());
html.button("+").click(function() { count++; that.update();});
html.button("-").click(function() { count--; that.update();});
};
return that;
};
See the complete example https://github.com/foretagsplatsen/widget-js/blob/master/sample/counterWidget/index.html
Install using bower
bower install widgetjs
Alternatively
Download the minified version or the complete project as a zip
Include the minified version in your project:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="WidgetJS.min.js"></script>
Use with requirejs:
requirejs.config({
baseUrl: ".",
paths: {
"widgetjs" : "<widget js path>/src/WidgetJS.min.js"
}
});
or
requirejs.config({
baseUrl: ".",
paths: {
"widgetjs" : "<widget js path>/src/"
}
});
You need yarn.
Install dependencies
yarn
Lint + run tests :
yarn run lint
yarn run build-test
yarn run test
Build:
yarn run build
Thanks a ton to @NicolasPetton for HtmlCanvas and tricking us into developing and using Widget-JS at Företagsplatsen
Widget-JS is under the MIT-license, see file LICENSE