当我使用淘汰赛更改所选选项时，如何修改新信息

Question

我的目标是，当我更改年份时，表的信息将更改为该年份。
我可以用我所拥有的功能获得我所需要的一切(我的意思是用javascript获得全年(，我唯一需要的就是如何更改信息。我之前尝试过使用布尔值，如果选项更改，则信息将更改，但同样，仅适用于绑定1次以上。
由于无法多次应用绑定，我的想法都用完了。(淘汰赛新手(

**HTML**"

<div class="col-md-3 container" style="margin:auto">
    <select id="mySelect" onchange="myFunction()" class="form-select" aria-label="Default select example">
        <option selected>Open this select menu</option>
        <option value="1951">1951</option>
        <option value="1953">1953</option>
        <option value="1955">1955</option>
        <option value="1957">1957</option>
        <option value="1959">1959</option>
        <option value="1961">1961</option>
        <option value="1963">1963</option>
    </select>
</div>
    <div class="col-md-5 container">
        <center><h3>Classificação dos Pilotos</h3></center>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th class="col-1">Position</th>
                    <th scope="col">Name</th>
                    <th scope="col">Points</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: DS">
                <tr data-bind="visible: $index() < 5">
                    <th scope="row" style="vertical-align:auto" data-bind="text: Position">#1</th>
                    <td data-bind="text: Name"></td>
                    <td data-bind="text: Points"></td>
                </tr>
            </tbody>
        </table>
        <button id="buttonD" type="button" class="btn btn-light container" style="margin:auto">Mostrar toda a classificação</button>
    </div>
<script src="../Scripts/bootstrap.bundle.min.js"></script>
<script src="../Scripts/knockout-3.5.1.js"></script>
<script src="../Scripts/jquery-3.6.0.min.js"></script>
<script src="myScript.js"></script>

''

JS

var year;
var triger = false;
$(document).ready(function () {
    console.log("ready!");
    ko.applyBindings(new vm());
});
function myFunction() {
    year = document.getElementById("mySelect").value;
    triger = true;
    console.log("HERE" + year)
}
var vm = function () {
    console.log("IMready!");
    var self = this;
    self.baseUri = ko.observable('http://192.168.160.58/Formula1/api/Statistics/Season')
    self.DS = ko.observableArray([]);
    self.activate = function (year) {
        console.log('CALL: getDrivers...');
        var composedUri = self.baseUri() + "?year=" + year;
        ajaxHelper(composedUri, 'GET').done(function (data) {
            console.log(data.DriverStandings);
            self.DS(data.DriverStandings);
            console.log("HEEEEERRREEEE")
            console.log(self.DS)
        });
    };
    function ajaxHelper(uri, method, data) {
        return $.ajax({
            type: method,
            url: uri,
            dataType: 'json',
            contentType: 'application/json',
            data: data ? JSON.stringify(data) : null,
        });
    }
    if (triger == true) {
        console.log("ACTIVATE")
        self.activate(year);
    }
    else if (triger == false) {
        console.log("ACTIVATE BY DEFAULT")
        self.activate(2021);
    }
}

''

Answer 1

您可以使用value绑定将下拉列表中选定的选项存储在视图模型中。

然后可以subscribe更改值以加载数据。

在下面的片段中，我简化了您的示例，以展示它是如何工作的。

var vm = function() {
  var self = this;
  
  // Data
  self.years = [ 1951, 1953, 1955, 1957, 1959, 1961, 1963 ];
  // State
  self.selectedYear = ko.observable(null);
  self.DS = ko.observableArray([]);
  
  // Methods
  self.activate = function(year) {
    if (!year) {
      self.DS([]);
      return;
    }
    
    var composedUri = year; // TODO: put back your URL
    ajaxHelper(composedUri, 'GET').then(function(data) {
      self.DS(data.DriverStandings);
    });
  };
  // Auto-update
  self.selectedYear.subscribe(self.activate);
}
ko.applyBindings(new vm());

// TODO: put back your real ajax call
function ajaxHelper(uri, method, data) {
  return Promise.resolve({
    DriverStandings: [
      { Position: "#1", Name: `${uri}’s winner`, Points: 9001 },
      { Position: "#2", Name: `${uri}’s runner up`, Points: 999 },
      { Position: "#3", Name: `${uri}’s loser`, Points: 42 },
    ]
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="
  value: selectedYear,
  options: years,
  optionsCaption: 'Open the select menu'">
</select>
<table>
  <thead>
    <tr>
      <th>Position</th>
      <th>Name</th>
      <th>Points</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: DS">
    <tr data-bind="visible: $index() < 5">
      <td data-bind="text: Position">#1</td>
      <td data-bind="text: Name"></td>
      <td data-bind="text: Points"></td>
    </tr>
  </tbody>
</table>

注意：上面的例子中有一个潜在的问题。当用户更改下拉列表值的速度快于ajax调用解析的速度时，将同时运行多个请求。防止这种情况的一个简单方法是在加载数据时禁用UI：

var vm = function() {
  var self = this;
  
  // Data
  self.years = [ 1951, 1953, 1955, 1957, 1959, 1961, 1963 ];
  // State
  self.selectedYear = ko.observable(null);
  self.DS = ko.observableArray([]);
  self.loading = ko.observable(false);
  
  // Methods
  self.activate = function(year) {
    if (!year) {
      self.DS([]);
      return;
    }
    
    var composedUri = year; // TODO: put back your URL
    self.loading(true);
    
    ajaxHelper(composedUri, 'GET')
      .then(function(data) {
        self.DS(data.DriverStandings);
      })
      .finally(() => {
        self.loading(false);
      });
  };
  // Auto-update
  self.selectedYear.subscribe(self.activate);
}
ko.applyBindings(new vm());

// TODO: put back your real ajax call
function ajaxHelper(uri, method, data) {
  // Fake a slow call
  return new Promise((res, rej) => {
    setTimeout(
      () => res({
        DriverStandings: [
          { Position: "#1", Name: `${uri}’s winner`, Points: 9001 },
          { Position: "#2", Name: `${uri}’s runner up`, Points: 999 },
          { Position: "#3", Name: `${uri}’s loser`, Points: 42 },
        ]
      }),
      500
    )
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="
  disable: loading,
  value: selectedYear,
  options: years,
  optionsCaption: 'Open the select menu'">
</select>
<table>
  <thead>
    <tr>
      <th>Position</th>
      <th>Name</th>
      <th>Points</th>
    </tr>
  </thead>
  <!-- ko if: loading -->
  <tbody><tr><td colspan="3">Loading...</td></tr></tbody>
  <!-- /ko -->
  <!-- ko ifnot: loading -->
  <tbody data-bind="foreach: DS">
    <tr data-bind="visible: $index() < 5">
      <td data-bind="text: Position">#1</td>
      <td data-bind="text: Name"></td>
      <td data-bind="text: Points"></td>
    </tr>
  </tbody>
  <!-- /ko -->
</table>