Ember组绑定

Question

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

| 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}}

但是在模板中进行过滤看起来不太好。有什么好的方法可以把它移到controller吗？

将球员列表输出到此类网格的 Ember 方式是什么，以便它很好地绑定并且如果我更改国家或联盟 - 球员被渲染到正确的单元格中？

Answer 1

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

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');

在辅助函数中，您正在传递所有球员以及正在处理的当前国家和联赛，并根据传入的值过滤 allPlayers 数组。（末尾的 @each...确保当播放器的 country/league 更新时 - 信息会重新呈现。）

您的模板可能如下所示：

<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>

工作演示here

Answer 2

在评论中跟进您的问题：

is there any way to have it [bound helper] as block? So that it's possible to do: {{#filterByCountryAndLeague... }} {{render 'player.card' player}}

答案是肯定的，也不是。那么，作为一个绑定帮手？否。请参阅文档 here

Bound helpers do not support use with Handlebars blocks or the addition of child views of any kind.

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

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')
});

然后，在您的组件模板中，您可以 render 每个玩家一个专门的模板：

<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>

工作演示here

Ember组绑定

Ember group binding

javascript

ember.js

ember-data