3

ドロップダウンリストの選択した値（ID、ラベルではない）を別のフィールドにバインドするようにノックアウトに指示する簡単な方法はありますか？適度に複雑なUIを使用しているので、IDだけでなく、オプションのラベルが変更されたときにフィールドにフックするクリーンな方法が必要です。

何かのようなもの：

 <select data-bind="options: dropDownLists.Region,optionsText:'RegionName',optionsValue:'RegionId',value:regionFilterId,label:regionFilterName" >

ラベルバインディングは値バインディングと同じことを行いますが、オプションのラベルを使用します。カスタムバインディングが必要になると思いますが、車輪の再発明は避けたいと思います。

4

3 に答える 3

4

あなたの要件を正しく理解しているかどうかはわかりませんが、HTML を気にしない場合は、次のようにしてください。

<select data-bind="options: dropDownLists.Region,optionsText:'RegionName',value:regionFilter"></select>

「optionsValue」バインディングは使用されないため、「value」バインディングは監視可能な no を ID のみで更新しますが、完全なオブジェクトで更新します。これにより、選択した領域の ID と名前を返す 2 つの計算されたオブザーバブルを簡単に記述できます。

self.regionFilter = ko.observable();

self.regionFilterId = ko.computed(function() {
    var region = self.regionFilter();
    if (region) return region.RegionId;
});

self.regionFilterName = ko.computed(function() {
    var region = self.regionFilter();
    if (region) return region.RegionName;
});

http://jsfiddle.net/VA7aF/

于 2012-06-08T13:26:40.553 に答える
1

または、サブスクライブを使用できます。

self.regionFilter = ko.observable();
self.regionFilterId  = ko.observable();
self.regionFilterName = ko.observable();

self.regionFilter.subscribe(function(region) {
    self.regionFilterId(region.RegionId());
    self.regionFilterId(region.RegionName());
});
于 2013-11-12T12:10:30.690 に答える
0

上記で提案した方法では、モデル内にあるすべての ID/名前のペアに対して計算値を作成する必要があります。

これをサポートするカスタムバインディングを作成しました。これで、オブジェクトを渡して「名前」フィールドを取得できます。

お役に立てれば：

HTML バインディング:

<span>Agency: </span><span data-bind="keyvalue:Agency,data:'Name'"></span>

HTML 選択:

<select id="selectAgency" data-bind="options: $root.agencies,optionsText: 'Name',optionsValue: function(item){return item;}, optionsCaption: 'Agency', value: Agency"></select>

JavaScript

ko.bindingHandlers.keyvalue = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor();
        var allBindings = allBindingsAccessor();
        var field = allBindings.data;
        if (value() !== undefined) {
            $(element).text(value()[field]);
        }
    }
};
于 2015-01-21T19:53:22.587 に答える