6

複数選択フィールドとして使用するために、ノックアウトでカスタム バインディングを作成しようとしています。例: 請求書レポートの選択画面をデザインしたい。この選択画面で、「請求書タイプ」フィールドを使用して、ユーザーが関心のあるタイプの請求書のみを提供できるようにしたいと考えています。このフィールドに標準のテキスト ボックスを使用すると、ユーザーは 1 つの請求書タイプしか提供できなくなります。 . 選択で複数のタイプを提供できるようにしてほしい。私の考えは、次のようなバインディングを準備することでした。

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

ここで、複数のユーザーの選択を保持するフィールド「optionsArray」を提供できます（私の場合、複数の請求書タイプになります）。UI に関して言えば、次のようになると思いました。要素の横にボタンがあり、複数のバインディングがあります。それをクリックすると、ダイアログ ウィンドウが表示され、そこにすべての「optionsArray」要素が表示され、変更したり、新しい要素を追加または削除したりできます。

すべての optionsArray 要素をオブザーバブルとして編集できるようにダイアログ ボックスに表示することに失敗し、すべての変更が viewModel.optionsArray に反映されるため、これを達成する方法がわかりません。これは可能ですか？

カスタム バインディングを構築した経験があり、これについて私を助けてくれますか?

4

2 に答える 2

5

そのために作成する必要はありませんcustom binding。selectedOptionsここでバインディングを使用できます：ドキュメントへのリンク：http： //knockoutjs.com/documentation/selectedOptions-binding.html。

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

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

そしてバインドするmultiselect：

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

ダイアログを使用して新しいオプションを追加する例を次に示します。http：//jsfiddle.net/vyshniakov/nZtZd/

于 2012-10-25T13:00:37.267 に答える
0 
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(", "))
    }
};
于 2012-10-25T13:20:02.290 に答える