KnockoutJS中foreach内ko if点击按钮仅展示对应索引内容问题

这个问题很常见——你现在用了一个全局的isDisplay observable来控制所有条目的显示/隐藏，所以点击任何按钮都会切换这个全局状态，自然所有额外内容都会一起出现或消失。要实现点击对应按钮只显示当前条目的信息，有两种常用的思路，我给你详细讲讲：

方案1：给每个员工对象添加独立的显示状态 #

这种方式让每个条目自己控制是否显示额外内容，支持同时打开多个条目的信息。

修改ViewModel代码 #

把每个员工对象扩展为包含isVisible observable的结构，点击按钮时只切换当前对象的状态：

return {
  colaboradores: ko.observableArray([
    { nome: 'Daniel', idade: 29, city: 'Floripa', isVisible: ko.observable(false) },
    { nome: 'Iago', idade: 22, city: 'Floripa', isVisible: ko.observable(false) },
    { nome: 'Rafael', idade: 26, city: 'Jaguaruna', isVisible: ko.observable(false) }
  ]),
  show: function (colaborador) {
    // 切换当前员工的显示状态
    colaborador.isVisible(!colaborador.isVisible());
    
    // （可选）如果需要点击新条目时自动关闭其他条目，取消下面的注释
    // this.colaboradores().forEach(item => {
    //   if (item !== colaborador) item.isVisible(false);
    // });
  }
}

修改View代码 #

按钮点击时传递当前员工对象，用对象自身的isVisible控制额外内容的显示：

<ul data-bind="foreach: colaboradores">
  <li>
    <span data-bind="text: nome"></span>
    <button class="btn btn-success" data-bind="click: $parent.show.bind($parent, $data)"> + Informações </button>
  </li>
  <!-- ko if: isVisible -->
  <li data-bind="text: idade"></li>
  <li data-bind="text: city"></li>
  <!-- /ko -->
</ul>

方案2：在ViewModel中跟踪选中的索引 #

这种方式通过全局维护一个选中索引，一次只显示一个条目的额外内容。

修改ViewModel代码 #

添加selectedIndex observable来记录当前选中的条目索引，点击按钮时更新这个索引：

return {
  selectedIndex: ko.observable(-1), // -1表示无选中条目
  colaboradores: ko.observableArray([
    { nome: 'Daniel', idade: 29, city: 'Floripa' },
    { nome: 'Iago', idade: 22, city: 'Floripa' },
    { nome: 'Rafael', idade: 26, city: 'Jaguaruna' }
  ]),
  show: function (index) {
    // 点击当前选中的条目则取消选中，否则切换到新条目
    if (this.selectedIndex() === index) {
      this.selectedIndex(-1);
    } else {
      this.selectedIndex(index);
    }
  }
}

修改View代码 #

按钮点击时传递当前条目的索引值，通过索引匹配判断是否显示额外内容：

<ul data-bind="foreach: colaboradores">
  <li>
    <span data-bind="text: nome"></span>
    <button class="btn btn-success" data-bind="click: $parent.show.bind($parent, $index())"> + Informações </button>
  </li>
  <!-- ko if: $parent.selectedIndex() === $index() -->
  <li data-bind="text: idade"></li>
  <li data-bind="text: city"></li>
  <!-- /ko -->
</ul>

两种方案各有优势：方案1适合允许同时展开多个条目，方案2适合一次只展示一个条目的场景，你可以根据需求选择。

内容的提问来源于stack exchange，提问作者Iago Barreto