2

これが私のサンプルデータです。これは、JSON 形式の構成でフォーム サーバーを以下のオブジェクト グラフにロードします。「Choice」オブジェクトの配列で、それぞれにid、name、stages、currentStageIdプロパティがあります。「 Choice」オブジェクトの「stages」プロパティは、 id、name、および valueプロパティを持つ「Stage」オブジェクトの配列です。「Choice」オブジェクトは、「First Stage」から「Fourth Stage」までの no.of ステージを通過します。ユーザーはドロップダウンリストから「ステージ」を選択して保存できます。「currentStageId」は「id」を格納するプロパティです

注: 各選択肢には、簡潔にするためにさまざまなタイプのステージを含めることができます。

つまり、選択肢 1 の場合、現在保存されているステージは 4 です。

var data = [
new Choice({
    id: 1,
    name: "One",
    stages: [
    new Stage({
        id: 1,
        name: "First Stage",
        value: 25
    }),
    new Stage({
        id: 2,
        name: "Second Stage",
        value: 50
    }),
    new Stage({
        id: 3,
        name: "Third Stage",
        value: 75
    }),
    new Stage({
        id: 4,
        name: "Fourth Stage",
        value: 100
    })],
    currentStageId: 4

}),
new Choice({
    id: 2,
    name: "Two",
    stages: [
    new Stage({
        id: 1,
        name: "First Stage",
        value: 25
    }),
    new Stage({
        id: 2,
        name: "Second Stage",
        value: 50
    }),
    new Stage({
        id: 3,
        name: "Third Stage",
        value: 75
    }),
    new Stage({
        id: 4,
        name: "Fourth Stage",
        value: 100
    })],
    currentStageId: 3

}),
new Choice({
    id: 3,
    name: "Three",
    stages: [
    new Stage({
        id: 1,
        name: "First Stage",
        value: 25
    }),
    new Stage({
        id: 2,
        name: "Second Stage",
        value: 50
    }),
    new Stage({
        id: 3,
        name: "Third Stage",
        value: 75
    }),
    new Stage({
        id: 4,
        name: "Fourth Stage",
        value: 100
    })],
    currentStageId: 2

})];

データを保持する「Choice」および「Stage」 Modlesとバインド用のViewModelは次のとおりです。

function ViewModel(data) {
    var self = this;
    self.choices = ko.observableArray(data);
    //dont require pre selection so kept it with empty observable so it
    //will be set to first item in the dropdown list
    self.selectedChoice = ko.observable();
}

function Choice(data) {
   //debugger;
    this.id = data.id;
    this.name = data.name;
    //require pre selection of stage as choice can go through no of 
    //stages and selected stage name and value will be stored
    this.selectedStage = ko.observable(ko.utils.arrayFirst(data.stages, function (item) {
        return item.id === data.currentStageId;
    }));
    this.stages = ko.observableArray(data.stages);

}

function Stage(data) {
    this.id = data.id;
    this.name = data.name;
    this.value = data.value;
}
ko.applyBindings(new ViewModel(data));

これが私の見解です

<select data-bind="options: choices, optionsText: 'name', value: selectedChoice"></select>
<select data-bind="options: selectedChoice().stages, optionsText: 'name', value: selectedChoice().selectedStage"></select>

Knockout.js 2x バージョン

  1. 保存されたステージの事前選択が機能しています
  2. 選択のために選択されたステージは、基礎となるオブザーバブルに更新されます

これはjsでKO 2xを使用した作業サンプルです

Knockout.js 3x バージョン

  1. 保存されたステージの事前選択が機能しない
  2. 選択肢として選択されたステージは保持されません。選択が変更されると、選択が変更されるたびに、selectedStage がドロップダウン リストの最初の項目に設定されます。

これは、KO 3x を使用した作業サンプルです。

最後に実際の部分。質問！

  1. 2 つの異なるバージョンの KO で同じコードの動作が異なるのはなぜですか。KO で何か新しいものを見逃していますか? それともKOのバグですか？
  2. 最新バージョンの KO を使用して、新しいバージョンの KO と同じ機能を実現するには、どのようなコード変更を行う必要がありますか? 私のプロジェクトは最新バージョンの konckout.js 3.1.0 で開発されており、この機能のために古いバージョンに戻したくありません。
  3. 2x と 3x のどちらの KO バージョンの動作が正しいですか? 内部で何が起こっているのですか？この動作の不一致を引き起こしているのはどれですか?

前もって感謝します。

4

1 に答える 1