修改 observableArray 不会立即更新选择 UI答案

【问题标题】：Modifying observableArray does not instantly update select UI修改 observableArray 不会立即更新选择 UI
【发布时间】：2020-08-09 23:49:51
【问题描述】：

我有一个多选下拉菜单。如果用户选择选项all，我希望取消选择所有其他选项，只选择all。我几乎可以正常工作，但我的问题是select 在最小化下拉列表之前不会显示更新的值。 observableArray 的状态似乎是正确的。

这是 HTML：

<select data-bind="options: games, selectedOptions: selectedGame, optionsText: 'name', optionsValue: 'id'" multiple="true"></select>

还有 javascript：

this.games= [
{ 
    name: 'All',
    id: 'all'
}, 
{ 
    name: 'Game1',
    id: 'game1'
},
{ 
    name: 'Game2',
    id: 'game2'
},  
] 

this.selectedGame = ko.observableArray(['all']);
this.selectedGameBeforeChange = ko.observableArray([]);

this.selectedGame.subscribe((oldValue) => 
{
    this.selectedGameBeforeChange(oldValue);
}, null, 'beforeChange');

this.selectedGame.subscribe((newValue) => 
{
    const newValueAdded = newValue.filter(x => !this.selectedGameBeforeChange().includes(x));
    if (newValueAdded.length > 0 && newValueAdded[0] === 'all'){
        this.selectedGame.removeAll();
        this.selectedGame.push('allCombined');    
    }

    this.updateTable();
});

上面的代码有效，但只有在我“最小化”选择并重新打开它后，更改才会反映在 UI 中。有没有办法在我的observableArray 更新后强制 UI 更新？

【问题讨论】：

我的回答是否帮助您解决了问题？如果是，请将其标记为已接受。如果没有，请告诉我，以便我进一步帮助您。

标签： javascript knockout.js observable

【解决方案1】：

你有 2 个错误：

应该是push('all')，而不是push('allCombined')。
在最后选择all 时有效，但在第一个选项时无效。为了解决这个问题，我们需要稍微修改一下条件。

这是最终代码（稍作修改，例如使用self 而不是this）：

var vm = function () {
  var self = this;
  self.games = [
    { name: 'All', id: 'all' }, 
    { name: 'Game1', id: 'game1' },
    { name: 'Game2', id: 'game2' }  
  ]; 
  self.selectedGames = ko.observableArray(['all']);
  self.selectedGamesBeforeChange = ko.observableArray([]);

  self.selectedGames.subscribe((oldValue) => 
  {
      self.selectedGamesBeforeChange(oldValue);
  }, null, 'beforeChange');

  self.selectedGames.subscribe((newValue) => 
  {
      if (newValue.length > 1 && 
          newValue.includes('all')){
          self.selectedGames.removeAll();
          self.selectedGamesBeforeChange.removeAll();
          self.selectedGames.push('all'); 
      }
  });
};
ko.applyBindings(new vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="options: games, selectedOptions: selectedGames, optionsText: 'name', optionsValue: 'id'" multiple="true"></select>

【讨论】：