Ractive.js chosen decorator plugin

Integrate Chosen 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-chosen.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-chosen' );

Add the decorator to your select elements:

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

Add option objects to the type property to set chosen options:

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

<select decorator='chosen: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 chosen applies to:

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

Created with the Ractive.js plugin template for Grunt.