时间戳

首页 > 解决方案 > 修改 observableArray 不会立即更新选择 UI

javascript - 修改 observableArray 不会立即更新选择 UI

问题描述

我有一个多选下拉菜单。如果用户选择该选项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 中。有没有办法强制 UI 在我observableArray的更新后立即更新？

标签： javascriptknockout.jsobservable

解决方案

你有 2 个错误：

  1. 而不是push('allCombined')，它应该是push('all')。
  2. 它在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>

推荐阅读