修改 observableArray 不会立即更新 select UI

Question

我有一个多 select 下拉菜单。如果用户 select 选项 all，我希望所有其他选项都被取消 select，并且只有 select 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();
});

上面的代码有效，但只有当我有 'minimised' 和 select 并重新打开它时，更改才会反映在 UI 中。有没有办法强制 UI 在我的 observableArray 更新后立即更新？

Answer 1

您有 2 个错误：

而不是push('allCombined')，应该是push('all')。
在最后选择 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>

修改 observableArray 不会立即更新 select UI

Modifying observableArray does not instantly update select UI

javascript

observable

knockout.js