ブートストラップデュアルリストボックスノックアウトバインド

Question

ASP.NET MVCプロジェクトでbootstrap dual listbox plugingを使用しています。
私もプロジェクトでKnockoutを使用しています。私はbindingHandlerを作成して、このプラグインがノックアウトとスムーズに動作するようにしようとしています。ここ

は私が

はHTML

<select class="form-control" data-bind="foreach:{data: EditedElement().Operations, as : 'op'} , dualList: EditedElement().Operations" multiple> 
    <option data-bind="value: op.OperationID(), text: op.Name(), selected: op.IsSelected()"></option> 
</select> 

ビューモデル

0をハンドラ

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); 
    } 
} 

をバインドしようとしたものです

私の問題はです。私はviewModel observableArrayとプラグインの間で同期をとれません。 つまり、ビューモデルプロパティに反映されるプラグイン（ユーザーがいくつかのオプションを削除またはいくつかのオプションを削除した）を変更したい場合は、

Answer 1

を同期するには、複数のオブザーバをカスタムに渡す必要があります

を結合することも、私はCを持っている

ko.bindingHandlers.dualList = { 
    init: function(element, valueAccessor) { 
    var data = ko.utils.unwrapObservable(valueAccessor()); 
    $(element).bootstrapDualListbox({ 
     selectorMinimalHeight: 160 
    }); 

    $(element).on('change', function() { 
     // save selected to an observable 
     data.selected($(element).val());; 
    }); 

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
     $(element).bootstrapDualListbox('destroy'); 
    }); 
    }, 
    update: function(element, valueAccessor) { 
    // to view if there is an update (without this "update" will not fire) 
    var options = ko.utils.unwrapObservable(valueAccessor()).options(); 
    $(element).bootstrapDualListbox('refresh', true); 
    } 
} 

ようになるので、あなたのhtmlは

<select class="form-control" data-bind="foreach: { data: Operations, as: 'op'}, dualList: { options: Operations, selected: Selected }" multiple> 
    <option data-bind="value: op.OperationID(), text: op.Name(), selected: op.IsSelected()"></option> 
</select> 

ようにする必要がありますし、カスタムバインディング汚い作業をreated jsfiddle