ajax - Knockout.jsは、ajaxリクエストから来る「オプション」から「値」をjsオブジェクトとして選択します

Question

オフトップ: タイトルはかなり紛らわしいですが、私の状況を簡潔に説明する正しい言葉が見つかりません。申し訳ありません。より良いものを見つけたら、あなたのものを提案してください。私はノックアウト.jsが初めてなので、単純な間違いを犯したと思いますが、一日中見つけることができません。

ここに私が持っているものがあります:

<select data-bind="
    value: SelectedPm,
    options: PmList, 
    optionsText: 'Name'"></select>
<b>Selected PM:</b> <span data-bind="text: SelectedPm().Name"></span>

JavaScript:

function PmModel(data) {
    this.Name = data.Name;
    this.Company = data.Company;
    this.Division = data.Division;
    this.EmpNo = data.EmpNo;

}

function ViewModel() {
    // Data
    var self = this;

    self.PmList = ko.observableArray([]);
    self.SelectedPm = ko.observable();

    // Operations
    ko.computed(function () {
        $.getJSON("/CumulativeReport/GetPmList", function (allData) {
            var mappedTasks = $.map(allData, function (item) { return new PmModel(item); });
            self.PmList(mappedTasks);
        });
    });
}

ko.applyBindings(new ViewModel());

この場合、コンソールに次のエラーが表示されます: Uncaught Error: Unable to parse bindings. メッセージ: TypeError: 未定義のプロパティ 'Name' を読み取れません。バインディング値: テキスト: SelectedPm().Name

getJSONしかし、モック配列を使用しない場合と使用する場合は正常に動作します

    function PmModel(data) {
        this.Name = data.Name;
        this.Company = data.Company;
        this.Division = data.Division;
        this.EmpNo = data.EmpNo;

    }

    function ViewModel() {
    // Data
    var self = this;

    self.PmList = ko.observableArray([]);
    self.SelectedPm = ko.observable();

    // Operations
    ko.computed(function () {
        self.PmList([{Name:'aaaa'}, {Name:'bbbb'}]);    
    });
}

ko.applyBindings(new ViewModel());

または、js 文字列オブジェクトを optionsValue として使用する場合

<select data-bind="
    value: SelectedPm,
    options: PmList, 
    optionsText: 'Name',
    optionsValue: 'Id'"></select>
<b>Selected PM:</b> <span data-bind="text: SelectedPm"></span>

JavaScript

function PmModel(data) {
    var self = this;
    this.Name = ko.observable(data.Name);
    this.Company = ko.observable(data.Company);
    this.Division = ko.observable(data.Division);
    this.EmpNo = ko.observable(data.EmpNo);
    this.Id = ko.computed(function () { return self.Company() + "-" + self.Division() + "-" + self.EmpNo(); });
}

function ViewModel() {
    // Data
    var self = this;

    self.PmList = ko.observableArray([]);
    self.SelectedPm = ko.observable();

    // Operations
    ko.computed(function () {
        $.getJSON("/CumulativeReport/GetPmList", function (allData) {
            var mappedTasks = $.map(allData, function (item) { return new PmModel(item); });
            self.PmList(mappedTasks);
        });
    });
}

ko.applyBindings(new ViewModel());

誰かが私が間違っていることを指摘できますか? 前もって感謝します。

---

UPD1

私はそれを機能させる方法を見つけました。見た目はあまりよくありませんが、少なくとも機能します

<select data-bind="
    value: SelectedPm,
    options: PmList, 
    optionsText: 'Name'"></select>
<!-- ko if: SelectedPm -->
<b>Selected PM:</b> <span data-bind="text: SelectedPm().Name"></span>
<!--/ko-->

私の推測では、ajax 呼び出しが起動されたときにPmList( SelectedPm) の依存関係をノックアウトし、UI で依存関係の値を再レンダリングしようとしましたが、要求の処理に時間がかかりすぎて、新しい値がSelectedPm時間内に配信されませんでした。まず第一に、バージョンが正常に機能したため、正当に見えません。optionsValueしかし、それを説明する方法が他にないので、それは私の推測に過ぎず、誰かがそれについてより明確なビジョンや答えを持っている場合は、共有してくださいそれ。