javascript - 根据其他选择列表中的选择重置(空)knockout.js 选择列表

Question

我有两个选择列表，一个选择列表由另一个选择列表的选择填充。我已经订阅了第一个选择框的值，以便在每次值更改时更新第二个列表。我没有发现的是，如果用户要在第一个列表中选择默认的“选择...”选项，如何重置第二个列表。

需要说明的是，该过程有效，除非用户选择默认选项。第二个列表保留之前的选择。

这是我的代码(这是一个 MVC 4 应用程序)。

View 模型:

var DashboardReportViewModel = function (config, originalData) {
    var self = this;

    self.breweryCode = ko.observable();
    self.lineCode = ko.observable();
    self.GetBreweries = ko.observableArray([]);
    self.GetLines = ko.observableArray([]);

    var loadBreweries = function () {
        $.ajax({
            url: config.GetBreweries,
            type: "GET",
            error: function (xhr, status, error) {
                alert('loadBreweries error');
            },
            success: function (data) {
                self.GetBreweries(data);
            },
            cache: false
        });
    };

    var loadLines = function () {
        $.ajax({
            url: config.GetLines,
            data: { breweryCode: self.breweryCode() },
            cache: false,
            type: "GET",
            error: function (xhr, status, error) {
                alert('loadLines error');
            },
            success: function (data) {
                self.GetLines(data);
            }
        });
    }

    loadBreweries();
    self.breweryCode.subscribe(function () {
        if (self.breweryCode() != undefined) {
            loadLines();
        }
    });
};

查看:

<select class="ui-select" id="BrewerySelect" name="BrewerySelect" data-bind="options: GetBreweries,
                                                                                             optionsText: 'Text',
                                                                                             optionsValue: 'Value',
                                                                                             value: breweryCode,
                                                                                             optionsCaption: 'Select a Brewery'"></select>

<select class="ui-select" id="LineSelect" name="LineSelect" data-bind="options: GetLines,
                                                                                             optionsText: 'Text',
                                                                                             optionsValue: 'Value',
                                                                                             value: lineCode,
                                                                                             optionsCaption: 'Select a Line'"></select>

Answer 1

我会这样走:

self.breweryCode.subscribe(function () {
    if (!!self.breweryCode()) {
        loadLines();
    } else {
        self.GetLines([]);
    }
});

如果 self.breweryCode() 为真，将放置一个 Ajax 调用来加载行，否则该列表将完全清空。

附言。如果你愿意，你也可以使用 observableArray utility methods执行 self.GetLines.removeAll()。