javascript - 订阅页面加载时的值

Question

我有两个 ajax 调用。一个用于在第一个下拉列表中加载发布周期，另一个用于在第二个下拉列表中加载场景。第二个下拉列表中的场景对应于第一个下拉列表中选择的值。我无法在页面加载时加载两者。我必须通过单击第一个下拉列表中的选项来选择值，然后才加载第二个下拉列表中的选项。我如何在页面加载时实现此功能，而不是通过手动选择或触发该事件来实现。我不想使用 ko 处理程序。感谢您提前提供帮助。

//load release cycles in first dropdown
self.pushReleaseCycles = function(releaseCycleUrl,scenarioNameUrl1,scenarioNameUrl2){
    $.ajax({
        url: sharepointScenarioListUrl + releaseCycleUrl,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            var items = data.d.results;
            items.forEach( function(item) { 
                if (self.release_cycles.indexOf(item.Release_x0020_Cycle) == -1) { 

                    self.release_cycles.push(item.Release_x0020_Cycle);
                }
            });

            self.selectedCycle.subscribe(function(value) {
                self.scenarios([]);
                        self.pushScenariosToDropdown(value,scenarioNameUrl1,scenarioNameUrl2);
            });
        },
        error: function (data) { 
            alert("ERROR in function pushReleaseCycles : " + data);console.log(data);
        }
    });
};

//load scenarios in second dropdown
self.pushScenariosToDropdown = function(value,scenarioNameUrl1,scenarioNameUrl2){
    $.ajax( {
        url: sharepointScenarioListUrl + scenarioNameUrl1 + value + scenarioNameUrl2,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            var items = data.d.results;
            items.forEach( function(item) { 
                self.scenarios.push(new ScenarioModel(item));
                console.log(data);
            });
            self.selectedScenario.subscribe(function(value) {
                dbName = ko.toJSON(value.title);
                jarFile1 = ko.toJSON(value.jar);
                fdMimoAvailable = ko.toJSON(value.fdmimo);
                self.setValues(dbName,jarFile1,fdMimoAvailable); 
            });
        },
        error: function (data) { 
            alert("ERROR in function pushScenariosToDropdown: " + data);console.log(data);
        }
    });
};

我的 HTML:

<select id="dropdown" required class="form-control select2" data-bind="options: release_cycles,value:selectedCycle">
</select>

<select id="dropdown2" required="required" class="form-control select2" data-bind="options: scenarios, optionsText:'scenarioName',optionsCaption:'Please Select Scenario', value:selectedScenario,validationOptions: { errorElementClass:'input-validation-error' },selectedOptions: chosenScenario">
</select>

Answer 1

我处理这个问题的方法是更改​​从服务器提取数据的方式。您将需要根据页面需要包含整个菜单结构。在我看来，稍微长一点的负载比不稳定的体验更好。下面是嵌套菜单的示例及其外观。

function ViewModel() {
  var self = this;

  self.Dropdown1 = ko.observableArray();
  self.SelectedItem1 = ko.observable();

  self.Dropdown2 = ko.computed(function() {
    if (self.SelectedItem1() == null) {
      return [];
    };
    console.log(ko.toJS(self.SelectedItem1()))
    return self.SelectedItem1().Submenu;
  });

  self.SelectedItem2 = ko.observable();

  self.LoadDropDown = function() {
    self.Dropdown1.push({
      "Name": "Hat",
      "Value": "top",
      "Submenu": [{
          "Name": "Blue",
          "Value": "#0000FF"
        },
        {
          "Name": "Green",
          "Value": "#00FF00"
        },
        {
          "Name": "Red",
          "Value": "#FF0000"
        }
      ]
    });
    self.Dropdown1.push({
      "Name": "Shirt",
      "Value": "middle",
      "Submenu": [{
          "Name": "Striped",
          "Value": "Striped"
        },
        {
          "Name": "Logo",
          "Value": "Logo"
        },
        {
          "Name": "Plain",
          "Value": "None"
        }
      ]
    });
    self.Dropdown1.push({
      "Name": "Pants",
      "Value": "bottom",
      "Submenu": [{
          "Name": "Jeans",
          "Value": "Jeans"
        },
        {
          "Name": "Kakhis",
          "Value": "Kakhis"
        },
        {
          "Name": "Cordroy",
          "Value": "Cordroy"
        }
      ]
    });
  }
  self.LoadDropDown();


}

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="options: Dropdown1, optionsText: 'Name', value: SelectedItem1"></select>

<select data-bind="options: Dropdown2, optionsText: 'Name', value: SelectedItem2"></select>