Javascript 余烬群结合

我正在寻找一种绑定分组对象并将其渲染到网格的好方法。下面是一个网格示例：

| League / Country  | Canada     | United States     | Brazil   |
| 1                 | John, Sam  |                   | Tim      |
| 2                 | Liam       |                   | Robert   |
| 3                 |            | James, Peter, Tom | Den      |

和玩家的模型

DS.Model.extend({
    name: DS.attr(),
    country: DS.attr(),
    leagueId: DS.attr("number")
}); 

从后端接收的数据是：

[
  { name: "John", country: "Canada", leagueId: 1 },
  { name: "Sam", country: "Canada", leagueId: 1 },
  { name: "Tim", country: "Brazil", leagueId: 1 },
  { name: "Liam", country: "Canada", leagueId: 2 },
 ... 
]

我想做以下几件事：

{{#each country in countries}}
    <tr>
      {{#each league in leagues}}
        <td>
          {{#each player in players}}
            {{#is player.country "==" country}}
              {{#is player.leagueId "==" league}}
                ... output player ..., e.g. {{ render 'player/card' player }}
              {{/is}}
            {{/is}}
          {{/each}}
        </td>
      {{/each}}
    </tr>
{{/each}}

{{{各国中的每个国家}
{{{联盟中的每个联盟}
{{{#玩家中的每个玩家}
{{#是player.country“==”country}
{{{#是player.leagueId“==”league}
... 输出播放器…，例如{{render'player/card'player}
{{/is}
{{/is}
{{/每个}}
{{/每个}}
{{/每个}}

但在模板中进行过滤看起来并不好。有没有一个好办法把它移到控制器上

---

将球员列表输出到这样的网格中的余烬方法是什么，这样它就可以很好地绑定，并且如果我更改了国家/地区或联盟，球员就会被渲染到适当的单元格中？

您可以为此编写绑定帮助器，如下所示：

Ember.Handlebars.registerBoundHelper('filterByCountryAndLeague', 
  function(allPlayers, curCountry, curLeague) {
    var matched = allPlayers.filterBy("country", curCountry).
                             filterBy('leagueId', curLeague);

    return matched.mapBy('name').join(", ");
}, '@each.country', '@each.leagueId');

在helper函数中，您传递所有球员以及正在处理的当前国家和联盟，并根据传入的值过滤

allPlayers

数组。（最后的

@each…

确保当球员的国家/联盟更新时，信息会重新提交。）

然后，您的模板可以如下所示：

<table border='2'>
  {{! First row }}
  <tr>
    <td>League / Country</td>
      {{#each country in countries}}
        <td>{{country}}</td>
      {{/each}}
  </tr>

  {{! Leagues }}
  {{#each league in leagues}}
    <tr>
      <td>{{league}}</td>
      {{#each country in countries }}
        <td>
          {{ filterByCountryAndLeague model country league  }}
        </td>
      {{/each}}
    </tr>
  {{/each}}

</table>

{{！第一行}
联盟/国家
{{{各国中的每个国家}
{{国家}
{{/每个}}
{{！联盟}
{{{联盟中的每个联盟}
{{联盟}
{{{各国中的每个国家}
{{filterByCountryAndLeague示范国家联盟}
{{/每个}}
{{/每个}}

---

工作演示

跟进评论中的问题：

有没有办法让它[绑定助手]成为块？这样就有可能做到：{{{{filterByCountryAndLeague…}{{呈现'玩家.卡片'玩家}}

答案是肯定和否定。那么，作为一个被束缚的助手？不，看文件

绑定辅助对象不支持与把手块一起使用或添加任何类型的子视图

但是…如果您需要使用模板来显示每个玩家的信息，您可以使用组件而不是绑定助手

App.FilteredPlayersComponent = Ember.Component.extend({
  allPlayers: null, 
  forCountry: null, 
  forLeague: null,
  filteredPlayers: function(){
    var allPlayers = this.get('allPlayers');
    var forCountry = this.get('forCountry');
    var forLeague = this.get('forLeague');
    var matched = allPlayers.filterBy("country", forCountry).
                             filterBy('leagueId', forLeague);
    return matched;
 }.property('allPlayers.@each.country', 'forCountry', 'forLeague')
});

然后，在组件模板中，您可以

为每个播放器渲染一个专用模板：

<script type="text/x-handlebars" id="components/filtered-players">
  {{#each player in filteredPlayers}}
    {{ render "player.card" player }}
  {{/each}}
</script>  

<script type="text/x-handlebars" id="player/card">
  <b>{{player.name}}</b>
</script>


{{{#过滤器层中的每个玩家}
{{render“player.card”player}
{{/每个}}
{{player.name}

工作演示
是的，这是一种更好的方式。快速提问：有没有办法将其设为块？因此可以这样做：
{{{filterByCountryAndLeague…}{{render'player.card'player}{{/filterByCountryAndLeague}
非常感谢！我使用绑定帮助程序已经有一段时间了，但没有查看组件：）