2

私はこのようなモデルを持っています（実際のコードではないので、タイプミスの可能性を気にしないでください）。

model = function(option, items) {
    self = this;
    self.options = options;
    self.items = ko.mapping.fromJS(items);
}

ドロップダウンで選択できるオブジェクトのoptionscoantainsリスト。には、オブジェクトのリストも含まれています。各オブジェクトには、options-listにあるような同一のオブジェクトがあります。items

次に、アイテムリストを調べて、各行にドロップダウンボックスを表示します。ここでは、アイテムリストの現在のアイテムのオブジェクトを選択オプションにする必要があります。ただし、optionValueを設定せず、オブジェクト全体でのみ一致させようとすると、機能しません...ただし、オブザーバブルは正常に機能し、オブジェクト全体のすべてのサブスクライブフィールドが新しい選択で更新されます。ただし、optionValueなどで機能する最初の選択を取得しましたId。

<select data-bind="options: $parent.options, optionsValue:'Id', optionsText: 'Name', value: item.Id"></select>

私の問題は、IDにバインドされた要素のみが更新されることです。ドロップダウンで何かを変更したときに変更されるのはIDだけであっても、現在のアイテムのすべてのプロパティを更新する必要があります。

これはどのようにすればよいですか？

4

1 に答える 1

6

ですから、これについての私の見解は次のとおりです。

  • 'オプション'のセットがあります。各オプションには、いくつかのプロパティとIDがあります
  • 'items'のセットがあり、各アイテムには、オプション内のオブジェクトの1つと等しいオブジェクトを含む1つのプロパティがあります。したがって、各「アイテム」には選択された「オプション」があります。

c＃やその他の高レベルの環境とは異なり、JavaScriptには平等の概念が組み込まれていません。このようなことを行うと、参照objA == objBが等しいかどうかがチェックされます（数値や文字列などのプリミティブ型には当てはまりません）。つまり、2つの変数が実際に同じオブジェクトを参照します。たとえば、.NETでは、クラスを実装（および演算子のオーバーロード）して、2つの異なるオブジェクトが等しいと見なすことができるかどうかを判断するカスタム比較を行うことができます。IEquatable<T>objA == objB

したがって、ノックアウトやドロップダウンなどを使用する場合、ノックアウトを一致させるには、比較するオブジェクトが実際に同じであることを確認する必要があることを覚えておくことが重要です。

あなたの場合、私はあなたのモデルを少し微調整しました。アイテムの選択オプションプロパティはSelectedOptionと呼ばれると仮定しました。

function model(options, items) {
    self = this;
    self.options = options;  
    self.items = ko.mapping.fromJS(items);

    // Loop over each of the items and swap out the server-side provided option object
    // with the corresponding option from the options parameter.
    ko.utils.arrayForEach(self.items(), function(item) {
        item.SelectedOption = ko.observable(
            ko.utils.arrayFirst(self.options, function(option) { return option.Id == item.SelectedOption.Id(); })
        );
    });
}

ko.mappingを使用しているので、オプションとアイテムのパラメーターは、なんらかの形でプレーンなjavascriptオブジェクト（Ajax、インラインjs）として提供されていると思います。

opts = [ 
    { Id: 1, Name: "Option 1" },
    { Id: 2, Name: "Option 2" },
    { Id: 3, Name: "Option 3" }
];

var items = [
    { Id: 1, Name: "Item 1", SelectedOption: { Id: 1, Name: "Option 1" } },
    { Id: 2, Name: "Item 2", SelectedOption: { Id: 2, Name: "Option 2" } },
    { Id: 3, Name: "Item 3", SelectedOption: { Id: 3, Name: "Option 3" } }
];

var viewModel = new model(opts, items);

各アイテムのSelectedOptionパラメータに含まれるオプションは、optionsプロパティのオプションとまったく同じであるため、ノックアウトはそれらを比較して同等であるかどうかを比較できるようになり、バインディングで次のように使用できます。

<div data-bind="foreach: items">
    <select data-bind="options: $parent.options, optionsText: 'Name', value: SelectedOption"></select>
</div>

jsfiddleでテストしてください：http：//jsfiddle.net/niik/HDsKC/

于 2012-02-24T17:53:55.047 に答える