Question

我有一个x量的Dropdown的集合。我想用DB中的列表填写下拉列表。

HTML

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

变量＆＃34; arr＆＃34;我试图归还它时是空的。如果我只返回带有值的对象，那么它可以工作但不能使用＆＃34; arr＆＃34;变量。这是我的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请求返回时。正如Knockout设计的那样，正如它应该的那样。

视图模型：

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()的结果。

从父视图模型中删除下拉列表

1 个答案: