Question

我使用的是Ember版本2.5.1

我有设置复选框，它们在选中时有效。但是，当我为一个用户选择一个框时，所有用户都会选中所有框。例如，如果我为Sophie选择一个团队（Speedy），那么每个人的复选框最终都会被检查并加入Speedy团队。我怎么阻止这个？并且让每个人都可以在不同的团队中。

e.g。 out out是一个每个人名字的列表，（如果'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>

控制器/ 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}}，并且每个玩家只显示一次，这就是为什么单击一个复选框似乎会改变每个人的团队...实际上你实际上并没有将任何玩家设置到任何团队

我看到的另一个问题是：您需要确定chackbox是否是您选择的正确UI。单个玩家可以在一个以上的团队中吗？如果是这样，那么复选框就好了......如果没有，那么选择框或一组无线电输入可能更好。

所有这一切......每个玩家对象/记录都需要一个实际存储代表他们属于哪个团队的值的属性。

您还需要从每个复选框/收音机/选择/任何实际将所选值设置到播放器对象上的操作：

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

这里有很多事情......但基本上我们正在做的是使用选择的选择输入（对我来说......收音机）并使用输入中的更改操作来设置每个特定的播放器＆＃39 ; s team属性...在每个玩家对象上定义。

我在示例中的操作中使用了mut帮助器..是一种在模板操作中设置值的快捷方式..如果您想使用复选框而不是...您很可能会想要替换mut帮助程序并在控制器中应用您自己的自定义操作。

如果您需要/想要任何额外的探索，请跟进

ember复选框 - 选择1，而不是全部选择全部

1 个答案: