ember 复选框 - select 1 个，并非所有 select 所有

Question

我正在使用 Ember 版本 2.5.1

我有设置复选框，它们在 selected 时有效。但是，当我 select 一个盒子，一个用户，所有的盒子都变成 select 所有用户。例如，如果我 select 一个团队 (Speedy) 支持 Sophie，那么每个人的复选框最终都会被选中并加入 Speedy 团队。我该如何阻止呢？并做到每个人都可以在不同的团队中。

例如结果是每个人的名字列表，（然后如果 'Team Speedy' 被选中），每个人的名字旁边是 'Team Speedy'.

teams.hbs;

          <div class="container">
              <table class="table">
                  <thead class="thead-inverse">
                  <tr>
                      <th>Name</th>
                      <th>Team Speedy</th>
                      <th>Team Alpha</th>
                      <th>Team Invincible</th>
                  </tr>
                  </thead>
                  <tbody>
                   {{#each model as |signed-player|}}
                        <tr>
                          <td> {{signed-player.name}} </td>
                          <td> {{input type='checkbox' checked=speedy}} </td>
                          <td> {{input type='checkbox' checked=alpha}} </td>
                          <td> {{input type='checkbox' checked=invincible}} </td>
                        </tr>
                   {{/each}}
                  </tbody>
              </table>


            {{#each model as |signed-player|}}
                <p><b>{{signed-player.name}}</b> is on the following team: <b>{{teamName}}</b></p>
            {{/each}}

          </div>

controllers/team.js

  speedy: false,
  alpha: false,
  invincible: false,


  teamName: function()
  {
    if ( this.get('speedy') ) {
      return 'Team Speedy';
    }
    else if ( this.get('alpha') ) {
      return 'Team Alpha';
    }
    else if ( this.get('invincible') ) {
      return 'Team Invincible';
    }
    else {
      return 'No team yet';
    };
  }.property('speedy', 'alpha', 'invincible'),

Answer 1

我在您的示例中看到的主要问题是您没有为任何播放器设置任何属性。您只计算一个属性 {{teamName}} 并且每个玩家只显示一次，这就是为什么单击一个复选框似乎会为每个人改变团队......而实际上您实际上并没有将任何玩家设置到任何球队。

我看到的另一个问题：您需要确定复选框是否适合 UI 您的 selection。一名球员可以参加多个球队吗？如果是这样，那么复选框就可以了。如果不是，那么 select 框或一组无线电输入可能更好。

话虽这么说...每个玩家 object/record 都需要一个属性来实际存储代表他们所属球队的值。

您还需要每个 checkbox/radio/select/whatever 的一个动作来实际将 selected 值设置到播放器对象上：

这是我的例子： https://ember-twiddle.com/1fe44ad4dc0494973c494a624ead79b7?fileTreeShown=false&openFiles=templates.application.hbs%2C

这里发生了很多事情...但本质上我们正在做的是使用选择的 select 输入（对我来说......收音机）并使用从输入到设置每个特定玩家的 team 属性... 这是在每个玩家对象上定义的开始。

我在示例中的操作中使用了 mut 帮助程序。这是在模板操作中设置值的快速方法。如果您想改用复选框。您将最可能想要替换 mut 助手并在控制器中应用您自己的自定义操作。

如果您need/want有任何额外的解释，请跟进

ember 复选框 - select 1 个，并非所有 select 所有

ember checkbox - select 1, not all select all

ember.js

ember-data

ember-cli