父視圖模型的剔除下拉列表

Question

我有一個x下拉列表數量的集合。 我想用來自數據庫的列表來填寫下拉列表。

HTML

<div class="input-col input-col-short">
    <select data-bind="options: $parent.insuranceCoverList(), optionsText: 'displayName', optionsValue: 'insuranceCoverId', value: selectedInsuranceCover"></select>
</div>

當我嘗試將其返回時，變量“ arr”為空。 如果我只返回帶有值的對象，則它可以工作，但不能與“ arr”變量一起工作。 這是我的insuranceCoverList（）

self.insuranceCoverList = function () {
    var arr = [];
    // Get data from the DB
    GetInsuranceCover(self.InsuranceTypeID())
        .done(function (data) {
            $(data).each(function (i, v) {
                arr.push(new AvailableDropdownItems({ dropdownItemId: v.ProgramCode, dropdownItemName: v.DisplayValue }));
            });
        });
    // doesn't work 
    return arr;
    // works
    //return [{ insuranceCoverId: 0, displayName: "Option A" }, { insuranceCoverId: 1, displayName: "Option B" }, { insuranceCoverId: 2, displayName: "Option C" }];
};

有什么建議我失敗了嗎？

Answer 1

Ajax是異步的。 您不能從異步函數返回值。

這是可觀察對象的理想情況。 創建一個可觀察的數組，其中包含您的列表項，並讓視圖依賴於該數組。

這樣，一旦您將項目寫入此數組，視圖就會自動更新，例如，當Ajax請求返回時。 正是按照“淘汰賽”的設計意圖，正是它應該做的那樣。

視圖模型：

self.InsuranceTypeID = ko.observable();
self.insuranceCoverList = ko.observableArray();

// automatic loading!
self.InsuranceTypeID.subscribe(function (insuranceTypeId) {
    GetInsuranceCover(insuranceTypeId).done(function (data) {
        self.insuranceCoverList(data.map(function (v) {
            return new AvailableDropdownItems({
                dropdownItemId: v.ProgramCode,
                dropdownItemName: v.DisplayValue
            });
        }));
    });
});

視圖：

<div class="input-col input-col-short">
    <select data-bind="options: $parent.insuranceCoverList, optionsText: 'displayName', optionsValue: 'insuranceCoverId', value: selectedInsuranceCover"></select>
</div>

通常，您不應在循環中將.push()到可觀察數組。 數組的每次更改都會通知其所有依賴項（訂閱者/視圖綁定），然后依次通知其依賴項，依此類推。

如果仍然要替換數組的內容，請先創建項目，然后一步將它們推入數組，就像上面的數組接收data.map()的結果data.map() 。