7

通常、選択リストがある場合、次のようにノックアウトでバインドします。

<select
    data-bind="
        options: data,
        optionsText: 'Name',
        optionsValue: 'Id',
        optionsCaption: 'Select ...',
        value: dataSelectedId" ></select>

しかし、このようなバインドには問題があります。選択したオブジェクトがありません。代わりにその ID があります。この 2 つの要件をマージする方法: アイテムの ID とアイテム自体の両方にバインドする必要がありますか?

computed現在、選択したアイテムを取得するために observableを使用しています。通常は次のようになります。

self.dataSelectedCO = ko.computed(function() {
    for (var i = 0; i < self.data().length; ++i)
        if (self.data()[i].Id() == self.dataSelectedId())
            return self.data()[i];
});

カスタム関数を使用して値ゲッターをラップしようとしましたが、選択が変更されるとすべての要素に対して呼び出されるため、このアプローチを使用するメリットはありません。ここにjsfiddleがあります。

4

1 に答える 1

7

パラメータを削除しoptionsValueます。次に、選択された値は、の代わりに「選択された項目」になりIdます。

更新されたコードは次のようになります。

<select
    data-bind="
    options: data,
    optionsText: 'Name',
    optionsCaption: 'Select ...',
    value: dataSelectedItem" ></select>

dataSelectedItem選択したアイテムが表示されます。

アイテムを手に入れたら。Id次のようにオブジェクト自体から取得できますdataSelectedItem().Id

于 2013-05-07T12:14:19.517 に答える