Merge pull request #17 from Devristo/master

KnockoutJS data binding support.

js/bootstrap-multiselect.js

@@ -20,12 +20,41 @@
 
     "use strict"; // jshint ;_;
 
+    if(ko && ko.bindingHandlers && !ko.bindingHandlers.multiselect){
+        ko.bindingHandlers.multiselect = {
+            init: function (element) {
+                var ms = $(element).data('multiselect');
+
+                if(!ms)
+                    throw new Error("Bootstrap-multiselect's multiselect() has to be called on element before applying the Knockout View model!");
+
+                var prev = ms.options.onChange;
+
+                ms.options.onChange = function(option, checked){
+                    // We dont want to refresh the multiselect since it would delete / recreate all items
+                    $(element).data('blockRefresh', true);
+
+                    // Force the binding to be updated by triggering the change event on the select element
+                    $(element).trigger('change');
+
+                    // Call any defined change handler
+                    return prev(option, checked);
+                }
+            },
+            update: function (element) {
+                var blockRefresh = $(element).data('blockRefresh') || false;
+                if (!blockRefresh) { $(element).multiselect("refresh"); }
+                $.data(element, 'blockRefresh', false);
+            }
+        };
+    }
+
     function Multiselect(select, options) {
 
         this.options = this.getOptions(options);
         this.select = $(select);
         this.container = $(this.options.buttonContainer)
-				.append('<button type="button" style="width:' + this.options.buttonWidth + '" class="dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option:selected', select)) + '</button>')
+            .append('<button type="button" class="dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option:selected', select)) + '</button>')
             .append('<ul class="dropdown-menu"></ul>');
 
         // Set max height of dropdown menu to activate auto scrollbar.
@@ -42,6 +71,17 @@
             this.select.attr('multiple', true);
         }
 
+        this.addOptions(select, options);
+
+        this.select
+            .hide()
+            .after(this.container);
+    };
+
+    Multiselect.prototype = {
+        addOptions: function(select, options){
+
+
             // Build the dropdown.
             $('option', this.select).each($.proxy(function(index, element) {
                 if ($(element).is(':selected')) {
@@ -61,9 +101,6 @@
                 }
             }, this));
 
-		this.select.hide()
-			.after(this.container);
-		
             // Bind the change event on the dropdown elements.
             $('ul li input[type="checkbox"]', this.container).on('change', $.proxy(function(event) {
                 var checked = $(event.target).prop('checked') || false;
@@ -94,10 +131,7 @@
             $('ul li a', this.container).on('click', function(event) {
                 event.stopPropagation();
             });
-	};
-
-	Multiselect.prototype = {
-		
+        },
         defaults: {
             // Default text function will either print 'None selected' in case no option is selected,
             // or a list of the selected options up to a length of 3 selected options.
@@ -143,6 +177,9 @@
 
         // Refreshs the checked options based on the current state of the select.
         refresh: function() {
+            $('ul', this.container).html('');
+            this.addOptions(this.select, this.options);
+
             $('option', this.select).each($.proxy(function(index, element) {
                 if ($(element).is(':selected')) {
                     $('ul li input[value="' + $(element).val() + '"]', this.container).prop('checked', true);