부트 스트랩 이중 목록 상자 녹아웃 바인딩

Question

ASP.NET MVC 프로젝트에서 bootstrap dual listbox pluging을 사용하고 있습니다.
프로젝트에서 녹아웃도 사용하고 있습니다. 나는 녹아웃으로 원활하게 작동하도록이 플러그인에 대해 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

을 동기화하려면 여러 관측 값을 사용자 정의

을 결합하는 것은 그래서 당신의 HTML은

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

또한 전 C가처럼 사용자 정의

<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