根据单选按钮显示不同的 <tr>（在 Knockout 中）

Question

好的，到此为止。

问题 1： 我想根据选中的单选按钮显示或不显示 tr 元素。共有 3 个按钮，分别显示“解锁成就”、“锁定”和“全部”（锁定 + 解锁）。

下面的代码显示了当我尝试调用三个不同的函数时的外观，每个函数都将 tr:s 可见性设置为 true/false，具体取决于选中的单选按钮。 （D.R.Y，我知道，但现在我只是在寻找功能）。

问题 2： 使 for 循环运行。 itemsListForFilter 是全局声明的，在过滤器函数之外。 itemsListForFilter 是一个对象 arrayMap 的副本，它在代码的其他地方被初始化和填充。该数组包含具有 - 除其他外 - 布尔值“radioCheck”的项目，默认值为“true”，我想检查它。

当我在复制发生的函数中访问 itemsListForFilter 时，它充满了项目，但是...... 当我尝试在过滤器函数中访问 itemsListForFilter 时，它显示为具有 null 值。所以副本在某处“丢失”了:)

查看/HTML：

<div class="widget-header-container">
                <h3 class="widget-header">Achievements</h3>
                <div class="wrapper">
                    <input type="radio" name="appliedFilter" value="all" data-bind="checked: filterAll"/><label for="all">Show all</label>
                    <input type="radio" name="appliedFilter" value="unlocked" data-bind="checked: filterUnlocked"/><label for="unlocked">Unlocked</label>
                    <input type="radio" name="appliedFilter" value="locked" data-bind="checked: filterLocked"/><label for="locked">Locked</label>
                </div>

                <div><div class="widget-header-line-game1"></div><div class="widget-header-line-game2"></div><div class="widget-header-line-shadow"></div></div>
            </div>
            <div>
                <div class="rounded-box" style="padding:15px;padding-top: 0;background-color:#fff;overflow:hidden;">
                    <table id="game-achievements" class="table table-condensed" style="margin-top:10px;">
                        <tbody data-bind="foreach: viewGame.achievements()">
                            <tr data-bind="visible: radioCheck" style="display: none">

视图模型/JS：

filterUnlocked: function(){
    return filter('unlocked');
},
filterLocked: function(){
    return filter('locked');
},
filterAll: function(){
    return filter('all');
},
filter: function(x){

    for (var item in itemsListForFilter){
        if (x === 'locked'){
            item.radioCheck = '!achieved';
        }
        if (x === 'unlocked') {
            item.radioCheck = 'achieved';
        }
        else {item.radioCheck = true;}
    }

观察视图模型是一个对象而不是一个函数：

var gamesViewModel = {

self: this,
settings: null,
gameId: null,
authorized: false,
(...)

现在名为 filterUnlocked 的函数等（过滤器除外）在 JS 文件中显示为“未使用的属性”。我应该怎么做才能从 HTML 中调用它们？或者有没有更好的方法来完成我正在寻找的东西？

谢谢。

Answer 1

你可以用更少的复杂度获得你想要的效果。

首先，广播组。 Knockout 中的checked 绑定替换（或类似）单选组的名称属性：所有单选按钮应该共享一个。绑定的变量将更新为所选单选按钮的值，这将导致绑定到同一变量的其他人取消选择。现在您只需要查看一个变量而不是三个变量。

不是通过隐藏行进行过滤，更常见的做法是让computed 过滤数据，然后表格只显示它。计算可以从“外部”获取数据；它不必是可观察的或视图模型的一部分（尽管如果它不是可观察的，如果源发生更改，您需要告诉计算的何时更新）。

这里有一个小例子：

var achievements = [{
  name: 'The locked one',
  locked: true
}, {
  name: 'The unlocked one',
  locked: false
}];
var vm = {
  appliedFilter: ko.observable('all'),
  viewGame: {}
};

vm.viewGame.achievements = ko.computed(function() {
  var filter = vm.appliedFilter();
  if (filter === 'all') {
    return achievements;
  }
  return ko.utils.arrayFilter(achievements, function(item) {
    return item.locked === (filter === 'locked');
  });
});

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="widget-header-container">
  <h3 class="widget-header">Achievements</h3>

  <div class="wrapper">
    <input type="radio" value="all" data-bind="checked: appliedFilter" />
    <label for="all">Show all</label>
    <input type="radio" value="unlocked" data-bind="checked: appliedFilter" />
    <label for="unlocked">Unlocked</label>
    <input type="radio" value="locked" data-bind="checked: appliedFilter" />
    <label for="locked">Locked</label>
  </div>
</div>
<div>
  <div class="rounded-box" style="padding:15px;padding-top: 0;background-color:#fff;overflow:hidden;">
    <table id="game-achievements" class="table table-condensed" style="margin-top:10px;">
      <tbody data-bind="foreach: viewGame.achievements()">
        <tr><td data-bind="text: name"></td></tr>
      </tbody>
    </table>
  </div>
</div>