paulocoghi · August 29, 2015 14:19 · Apr 27, 2015 · Apr 24, 2015
diff --git a/ractive-decorators-bootstrap-select.js b/ractive-decorators-bootstrap-select.js
@@ -52,8 +52,8 @@
 
     bootstrapSelectDecorator = function (node, type) {
 
-        var ractive = node._ractive.root;
-        var setting = false;
+        var nodeInfo = Ractive.getNodeInfo(node);
+        var setting  = false;
         var observer;
 
         var options = {};
@@ -69,26 +69,24 @@
         }
 
         // Push changes from ractive to bootstrap select
-        if (node._ractive.binding) {
-            observer = ractive.observe(node._ractive.binding.keypath, function (newvalue) {
-                if (!setting) {
-                    setting = true;
-                    window.setTimeout(function () {
-                        if (newvalue === "")
-                            $(node).selectpicker("val", "");
-
-                        $(node).selectpicker('refresh');
-                        setting = false;
-                    }, 0);
-                }
-            });
-        }
+        observer = nodeInfo.ractive.observe(nodeInfo.keypath, function (newvalue) {
+            if (!setting) {
+                setting = true;
+                window.setTimeout(function () {
+                    if (newvalue === "")
+                        $(node).selectpicker("val", "");
+
+                    $(node).selectpicker('refresh');
+                    setting = false;
+                }, 0);
+            }
+        });
 
         // Pull changes from selectpicker to ractive
         $(node).selectpicker(options).on('change', function () {
             if (!setting) {
                 setting = true;
-                ractive.updateModel();
+                nodeInfo.ractive.updateModel();
                 setting = false;
             }
         });
@@ -108,4 +106,4 @@
 
     Ractive.decorators.bootstrapSelect = bootstrapSelectDecorator;
 
-}));
+}));
diff --git a/ractive-decorators-bootstrap-select.js b/ractive-decorators-bootstrap-select.js
@@ -0,0 +1,111 @@
+/*
+
+	ractive-decorators-bootstrap-select
+	=============================================
+
+	Integrate Ractive with Bootstrap Select
+
+	==========================
+
+	Usage: Include this file on your page below Ractive, e.g:
+
+	    <script src='lib/ractive.js'></script>
+	    <script src='lib/ractive-decorators-bootstrap-select.js'></script>
+
+	If you're using a module loader, it will be available soon so
+	you can require it:
+
+	    // requiring the plugin will 'activate' it - no need to use
+	    // the return value
+	    require( 'ractive-decorators-bootstrap-select' );
+
+*/
+
+(function ( global, factory ) {
+
+	'use strict';
+
+	// Common JS (i.e. browserify) environment
+	if ( typeof module !== 'undefined' && module.exports && typeof require === 'function' ) {
+		factory( require( 'ractive' ), require( 'jquery' ) );
+	}
+
+	// AMD?
+	else if ( typeof define === 'function' && define.amd ) {
+		define([ 'ractive', 'jquery' ], factory );
+	}
+
+	// browser global
+	else if ( global.Ractive && global.jQuery) {
+		factory( global.Ractive, global.jQuery );
+	}
+
+	else {
+		throw new Error( 'Could not find Ractive or jQuery! They must be loaded before the ractive-decorators-bootstrap-select plugin' );
+	}
+
+}( typeof window !== 'undefined' ? window : this, function ( Ractive, $ ) {
+
+	'use strict';
+
+    var bootstrapSelectDecorator;
+
+    bootstrapSelectDecorator = function (node, type) {
+
+        var ractive = node._ractive.root;
+        var setting = false;
+        var observer;
+
+        var options = {};
+        if (type) {
+            if (!bootstrapSelectDecorator.type.hasOwnProperty(type)) {
+                throw new Error( 'Ractive Bootstrap Select type "' + type + '" is not defined!' );
+            }
+
+            options = bootstrapSelectDecorator.type[type];
+            if (typeof options === 'function') {
+                options = options.call(this, node);
+            }
+        }
+
+        // Push changes from ractive to bootstrap select
+        if (node._ractive.binding) {
+            observer = ractive.observe(node._ractive.binding.keypath, function (newvalue) {
+                if (!setting) {
+                    setting = true;
+                    window.setTimeout(function () {
+                        if (newvalue === "")
+                            $(node).selectpicker("val", "");
+
+                        $(node).selectpicker('refresh');
+                        setting = false;
+                    }, 0);
+                }
+            });
+        }
+
+        // Pull changes from selectpicker to ractive
+        $(node).selectpicker(options).on('change', function () {
+            if (!setting) {
+                setting = true;
+                ractive.updateModel();
+                setting = false;
+            }
+        });
+
+        return {
+            teardown: function () {
+                $(node).selectpicker('destroy');
+
+                if (observer) {
+                    observer.cancel();
+                }
+            }
+        };
+    };
+
+    bootstrapSelectDecorator.type = {};
+
+    Ractive.decorators.bootstrapSelect = bootstrapSelectDecorator;
+
+}));