Knockout.js binding with multiple Select2

javascript, jquery, jquery-select2, knockout.js

Solution

@rniemeyer threw this up on a JSFiddle not too long ago that should help you out:

http://jsfiddle.net/rniemeyer/R8UF5/

His fiddle, updated

Use the following binding combined with a couple fiddles for when a value is updated:

ko.bindingHandlers.select2 = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var obj = valueAccessor(),
      allBindings = allBindingsAccessor(),
      lookupKey = allBindings.lookupKey;

    setTimeout(function() { 
      $(element).select2(obj);
    }, 0);
    
    if (lookupKey) {
      var value = ko.utils.unwrapObservable(allBindings.value);
      $(element).select2('data', ko.utils.arrayFirst(obj.data.results, function(item) {
        return item[lookupKey] === value;
      }));
    }

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      $(element).select2('destroy');
    });
  },
  update: function(element) {
    $(element).trigger('change');
  }
};

Problem

My Question is when ever I bind my Select2 with Multiple with Knockout View Model. After selecting one of the options, the data is lost for the second time KnockOutCode ``` $(window).load(function () { ko.bindingHandlers.select2 = { init: function (element, valueAccessor, allBindingsAccessor) { var obj = valueAccessor(), allBindings = allBindingsAccessor(), lookupKey = allBindings.lookupKey; $(element).select2(obj); if (lookupKey) { var value = ko.utils.unwrapObservable(allBindings.value); $(element).select2('data', ko.utils.arrayFirst(obj.data.results, function (item) { return item[lookupKey] === value; })); } ko.utils.domNodeDisposal.addDisposeCallback(element, function () { $(element).select2('destroy'); }); }, update: function (element) { $(element).trigger('change'); } }; ko.applyBindings(new ViewModel()); function ViewModel() { var self = this; self.MetricsModel = ko.observableArray([]); GetMetrics(); function GetMetrics() { $.ajax({ url: '/Admin/GetMetrics', type: "POST", dataType: "json", success: function (returndata) { self.MetricsModel(returndata); }, error: function () { alert("eRROR GET Applications"); } }); }; } $("#application-select-metrics").select2(); } ``` HTML File ``` <select multiple="multiple" id="application-select-metrics" class="form-control" data-bind="options: MetricsModel, optionsText: 'Metrics_Name', OptionsValue:'Metrics_ID', optionsCaption: 'Choose...', select2: {}"></select> @*<select multiple="multiple" id="application-select-metrics" class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>*@ ``` Please note that the commented sections, i.e, hardcoded values works, and it allows me to select multiple values, and using Knockout it works for the first time, i get a list populated, but after selecting once, for the second time the data is lost. Please help, Thanks, EDIT: As mentioned by Hanes, I've edited the code, and introduced custom binding, but still it does not work, I dont think the update section of the custom binding is working properly,as the drop down populate once but fails to bind for the second time. Any help would be gladly appreciated.

Original source