餘燼複選框 - 選擇1，並非全部全選

Question

我正在使用Ember版本2.5.1

我已設置複選框，並且它們在選中時工作。但是，當我選擇一個框時，對於一個用戶，所有用戶都會選中所有框。例如，如果我爲Sophie選擇一個團隊（Speedy），那麼每個複選框最終都會被檢查並加入Speedy團隊。我如何解決這個問題？做到這一點，每個人都可以在不同的團隊中。

例如outwork是每個人的名字列表，（如果'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}}，並且每個玩家只顯示一次，這就是爲什麼點擊一個複選框似乎改變了每個人的團隊......實際上，實際上你並沒有真正將任何玩家設置到任何團隊中。

我看到的另一個問題是：您需要確定chackboxes是否適合您的選擇。一個球員可以在多個球隊上嗎？如果是這樣，那麼複選框是好的..如果沒有，那麼選擇框或一組無線電輸入可能會更好。

所有這些......每個玩家對象/記錄都需要一個實際存儲代表他們屬於哪個團隊的值的屬性。

您還需要從每個複選框/收音機/選擇/任何實際設置所選值一個動作到播放器對象：

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

有一些事情發生在這裏...但基本上我們正在做的是使用一個選擇輸入（對我來說......收音機）並使用來自輸入的改變動作來設置每個特定玩家的屬性...玩家對象開始。

我使用mut助手在我的行動中的例子..是一種快速的方式來設置模板行動中的值..如果你想使用複選框，而不是..你很可能想要替換mut幫助程序並在控制器中應用您自己的自定義操作。

請跟進，如果你需要/想要任何額外的陳述