ノックアウトjsの複数選択のカスタムバインディング

Question

ノックアウトで複数の選択フィールドとして使用するカスタムバインディングを作成しようとしています。例： 請求書レポートの選択画面を設計します。この選択画面では、項目 '請求書タイプ'を使用して、ユーザーが請求書のタイプのみを提供できるようにしたいと考えています。このフィールドに標準テキストボックスを使用すると、1つの請求書タイプ。私はそれらが選択において複数のタイプを提供できるようにしたい。 私の考えを準備した結合のような：私はフィールドを提供することができ

// html 
<input data-bind="multiple: { data: optionsArray }" /> 
... 
// view model 
optionsArray = ko.observableArray(); 

「optionsArray」、（複数の請求書の種類になります私の場合は）ユーザーの複数の一品を開催します。 UIに関しては、このように見えると思っていました。複数のバインディングを持つ要素の隣にボタンがあります。クリックすると、ダイアログウィンドウが表示され、そこにすべてのoptionsArray要素が表示され、変更できます。新しい要素を追加または削除できます。

ダイアログボックスのすべてのoptionsArray要素をオブザーバブルとして編集できず、すべての変更がviewModel.optionsArrayに反映されないため、これを実現する方法がわかりません。これも可能ですか？

カスタムバインディングを作成した経験がありますか？

Answer 1

custom bindingを作成する必要はありません。 selectedOptionsバインディングを使用することができます。ここにはドキュメントへのリンクがあります：http://knockoutjs.com/documentation/selectedOptions-binding.html。ダイアログを例に作業して、新しいオプションが追加される。ここ

<select data-bind="options: optionsArray, selectedOptions: selectedTypes" size="5" multiple="true"></select> 

：http://jsfiddle.net/vyshniakov/nZtZd/

Answer 2

ko.bindingHandlers.multiple = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     $(element).change(function() { 
      var actualValueArray = $(this).val().split(","); 
      valueAccessor(actualValueArray); 
     }); 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var valueArray = valueAccessor(); 
     var valueArrayUnwrapped = ko.utils.unwrapObservable(value); 
     // Join all invoice numbers using comma 
     $(element).val(valueArrayUnwrapped.join(", ")) 
    } 
}; 

を multiselectに

self.optionsArray = ko.observableArray(); 
self.selectedTypes = ko.observableArray(); 

を、バインド：

ビューモデルにoptionsArrayとselectedTypes観察可能な配列を追加します。