title: bootstrap Dual Listbox knockout binding
body: <p>I am using <a href="https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox" rel="nofollow noreferrer">bootstrap dual listbox pluging</a> in my ASP.NET MVC project. <br/>
  I am also using Knockout in the project. I am trying to create <code>bindingHandler</code> for the this plugin to make it working smoothly with knockout.</p>
  
  <p>here is what I tried</p>
  
  <p><strong>Binding Handler</strong></p>
  
  <pre><code>ko.bindingHandlers.dualList = {
      init: function (element, valueAccessor) {
          $(element).bootstrapDualListbox({
              selectorMinimalHeight: 160
          });
  
          $(element).on('change', function () {
              $(element).bootstrapDualListbox('refresh', true);
          });
  
          ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
              $(element).bootstrapDualListbox('destroy');
          });
      },
      update: function (element, valueAccessor) {
          $(element).bootstrapDualListbox('refresh', true);
      }
  }
  </code></pre>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;select class="form-control" data-bind="foreach:{data: EditedElement().Operations, as : 'op'} , dualList: EditedElement().Operations" multiple&gt;
      &lt;option data-bind="value: op.OperationID(), text: op.Name(), selected: op.IsSelected()"&gt;&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>View Model</strong></p>
  
  <pre><code>function SelectOperationVM(operationId, isSelected, name) {
      var self = this;
  
      self.OperationID = ko.observable(operationId);
      self.IsSelected = ko.observable(isSelected);
      self.Name = ko.observable(name);
  
      self.copy = function () {
          return new SelectOperationVM(self.OperationID(), self.IsSelected(), self.Name());
      }
  }
  </code></pre>
  
  <p><strong>My problem is</strong> that I can not make sync between the viewModel <code>observableArray</code>, and the plugin.
  In other words, I want the changes in the plugin (the user removed some options or added some options) to be reflected on the view model property, and vice verse </p>