Ractive.js addable decorator plugin

Find more Ractive.js plugins at ractivejs.org/plugins

Usage

Include this file on your page below Ractive, e.g:

<script src='lib/Ractive.js'></script>
<script src='lib/Ractive-decorators-addable.js'></script>

Or, if you're using a module loader, require this module:

// requiring the plugin will 'activate' it - no need to use the return value
require( 'Ractive-decorators-addable' );

Then use the decorator like so:

<!-- template -->
<ul>
    {{#list}}
    <li decorator='addable'>{{.}}</li>
    {{/list}}
</ul>

var ractive = new Ractive({
    el: myContainer,
    template: myTemplate,
    data: { list: [ 'Firefox', 'Chrome', 'Internet Explorer', 'Opera', 'Safari', 'Maxthon' ] }
});

Or with inline configuration:

<ul>
    {{#list}}
    <li decorator='multi:{ sortable:true, addable:{ elementName: "<a><i></i></a>", addText: "", remText: "", allAdd: true, addStyle: "inner" } }'>
    {{/list}
</ul>

Or with global configuration:

Ractive.decorators.addable.elementName = '<a><i></i></a>';
Ractive.decorators.addable.addText = '';
Ractive.decorators.addable.remText = '';

License

Forked from ractive-addable plugin which was created with the Ractive.js plugin template for Grunt.

zaus/Ractive-decorators-addable

Ractive.js addable decorator plugin

Usage

License