title: Knockout.js binding with multiple Select2
body: <p>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 </p>
  
  <p>KnockOutCode</p>
  
  <pre><code>$(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();    
  }    
  </code></pre>
  
  <p>HTML File</p>
  
  <pre><code>    &lt;select multiple="multiple" id="application-select-metrics" class="form-control" data-bind="options: MetricsModel, optionsText: 'Metrics_Name', OptionsValue:'Metrics_ID', optionsCaption: 'Choose...', select2: {}"&gt;&lt;/select&gt;
  @*&lt;select multiple="multiple" id="application-select-metrics" class="form-control"&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
      &lt;option&gt;4&lt;/option&gt;
      &lt;option&gt;5&lt;/option&gt;
  &lt;/select&gt;*@
  </code></pre>
  
  <p>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.</p>
  
  <p>Please help,</p>
  
  <p>Thanks,</p>
  
  <p>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. </p>