Ractive.js select2 decorator plugin

Integrate Select2 with Ractive, including two-way binding.

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-select2.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-select2' );

Add the decorator to your select elements:

<select decorator='select2' value='{{selected}}'>
    {{#options}}
        <option value='{{.}}'>{{.}}</option>
    {{/options}}
</select>

Add option objects to the type property to set select2 constructor options:

Ractive.decorators.select2.type.demo = {
    width: '25%',
    // ... other select2 options
};

<select decorator='select2:demo' value='{{selected}}'>
    {{#options}}
        <option value='{{.}}'>{{.}}</option>
    {{/options}}
</select>

You can also use a function that returns an options object. The function is passed the DOM node the select2 applies to:

Ractive.decorators.select2.type.demo = function (node) {
    return {
        width: '25%',
        // ... other select2 options
    }
};

Created with the Ractive.js plugin template for Grunt.