Tired of writing procedural code to generate Javascript UI elements in a completely different section of the HTML document? So are we! Mutiny.js allows you to declaratively create widgets in the same location by extending HTML5 data attributes.
Usage
-
Install Mutiny. We use bower:
$ bower install --save mutiny
-
Load Mutiny into the page:
<script src='bower_components/mutiny/src/core.js'></script> <script src='bower_components/mutiny/src/text-select.js'></script>
-
Add the HTML5 data attributes:
<span data-mutiny-text-select=''>Click me to select all</span>
-
Watch the magic!
Extending
Javascript:
Mutiny.widgets.optionsToText = {
defaults: {'def': 'opt'},
init: function(instigator, options) {
var s = [];
for(var key in options) {
s.push('"' + key + '": "' + options[key] + '"');
}
instigator.textContent = '{' + s.join(', ') + '}');
}
};
HTML5:
<div data-mutiny-options-to-text='{"custom": "arg"}'></div>
Running Tests/Examples
$ git clone https://github.com/enova/mutiny.git
$ cd mutiny
$ ./server.sh
$ open http://localhost:5100/
Licensing
Mutiny is released by Enova under the MIT License.