javascript - knockout 中的比赛条件

Question

我最近在我的代码中遇到了竞争条件的小问题。我正在使用 Knockout.Js 收集一些要显示给用户的信息。

当需要在选择值之前生成下拉列表时，就会出现问题。 通常下拉列表比其他请求小并且会赢得比赛，因此不会造成问题。然而，我在我的应用程序中看到了一些情况，在较慢的互联网连接上，列表会在其次加载。下面是一个例子。如果列表中没有该值的选项，则无法选择它，并且对用户来说就好像没有被选中一样。

使用 setTimeout 我模拟了这种体验。您可以交换这两个值以查看“成功”场景。

function ViewModel() {
  var self = this;

  self.UserName = ko.observable();
  self.UserGroup = ko.observable();
  self.GroupList = ko.observableArray();

  self.LoadUserGroups = function() {
    //Ajax call to populate user groups 

    setTimeout(function() {
      response = "Red Team,Blue Team,Green Team".split(",");

      self.GroupList(response)
    }, 2000) /// SWAP ME 
  }

  self.LoadUserInformation = function() {
    setTimeout(function() {
      response = {
        UserName: "John Pavek",
        UserGroup: "Blue Team"
      };

      self.UserName(response.UserName);
      self.UserGroup(response.UserGroup);

    }, 1000) // SWAP ME
  }

  self.Load = function() {
    self.LoadUserGroups();
    self.LoadUserInformation();
  }

  self.Load();

}

ko.applyBindings(new ViewModel())

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

User Name:
<input data-bind="value: UserName" /> User Group:
<select data-bind="options: GroupList, optionsCaption: '--Pick a Team--', value: UserGroup"></select>

我可以在我的代码中添加什么，Vanilla 或 knockout 来防止这个问题的发生而不减慢整个体验？

Answer 1

发生的事情是，当 LoadUserInformation 尝试设置的值不在选项列表中时，选择将覆盖 UserGroup。但是你可以使用 valueAllowUnset告诉它不要担心未知的值。然后它不会覆盖。

function ViewModel() {
  var self = this;

  self.UserName = ko.observable();
  self.UserGroup = ko.observable();
  self.GroupList = ko.observableArray();

  self.LoadUserGroups = function() {
    //Ajax call to populate user groups 

    setTimeout(function() {
      response = "Red Team,Blue Team,Green Team".split(",");

      self.GroupList(response)
    }, 2000) /// SWAP ME 
  }

  self.LoadUserInformation = function() {
    setTimeout(function() {
      response = {
        UserName: "John Pavek",
        UserGroup: "Blue Team"
      };

      self.UserName(response.UserName);
      self.UserGroup(response.UserGroup);

    }, 1000) // SWAP ME
  }

  self.Load = function() {
    self.LoadUserGroups();
    self.LoadUserInformation();
  }

  self.Load();

}

ko.applyBindings(new ViewModel())

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

User Name:
<input data-bind="value: UserName" /> User Group:
<select data-bind="options: GroupList, optionsCaption: '--Pick a Team--', value: UserGroup, valueAllowUnset: true"></select>