9

私は次の問題を抱えています：

の形式でオブジェクトの観測可能な配列があります{ isSelected: false, Message: "Test1" }, { isSelected: true, Message: "Test2"}。この監視可能な配列からビューに選択リストを生成しています。プロパティisSelected=trueの値を事前に選択する必要があります（この例では、メッセージ： "Test2"になります）。これが私のコードです：

ノックアウト：

function ViewModel()
{

    this.DummyOptions = ko.observableArray([{ isSelected: false, Message: "Test1" }, { isSelected: true, Message: "Test2"}]);
    this.selectedValue = ko.observable();
}

ko.applyBindings(new ViewModel());

HTML：

<div>
Dummy
<select id="dummy" data-bind="options: DummyOptions, optionsText: 'Message'"></select>
</div>

フィドル： http： //jsfiddle.net/PsyComa/RfWVP/52/

これは簡単なことだと思いますが、私はノックアウトに非常に慣れておらず、期待どおりに機能させることができませんでした。作業コードに関するヘルプは大歓迎です。ありがとうございました。

4

1 に答える 1

13

そうです、これはknockout.jsを使用すると非常に簡単です。

オブザーバブルは、「値」バインディングを使用して、現在選択されているオプションにバインドできます。

<select data-bind="options: DummyOptions,
                   optionsText: 'Message',
                   value: selectedValue"></select>

ここで、このオブザーバブルの初期値として「isSelected==true」を指定したオブジェクトを使用します。

function ViewModel() {
    this.DummyOptions = ko.observableArray([...]);

    // Filter the array to find the first element with isSelected == true
    var selectedOption = ko.utils.arrayFirst(this.DummyOptions(), function(item) {
        return item.isSelected;
    });

    // Use this option as the initial value
    this.selectedValue = ko.observable( selectedOption );
}

http://jsfiddle.net/RfWVP/54/

于 2012-04-26T21:17:50.403 に答える