Ember组绑定 [英] Ember group binding

问题描述

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

I'm looking for a good way to bind grouped objects and render it to the grid. Here's a grid example:

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

但在模板中进行过滤并不好看。有没有一个很好的方式将其移动到控制器？

But having filtering within template does not look good. Is there a good way to move it to controller?

什么是Ember方式输出这些网格中的玩家列表，以便它很好地绑定，如果我改变国家或联盟 - 玩家被渲染为正确的单元格

What is the Ember-way to output list of players into such grid, so that it nicely bound and if I change country or league - player is rendered into proper cell?

推荐答案

在评论中跟进您的问题：

Following up on your question in the comment:

有没有办法把它[bound helper]作为块？所以可以这样做：{{#filterByCountryAndLeague ...}} {{render'player.card'player}}

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

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

The answer is yes and no. So, as a bound helper? No. See the docs here

绑定助手不支持使用Handlebars块或添加任何类型的子视图。

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

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

But... if you need to use a template to display each player's info, you can use a component instead of a bound helper.

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('[e-mail]', 'forCountry', 'forLeague')
});

然后，在您的组件模板中，您可以 render 每个播放器的专用模板：

Then, inside your component template, you can render a specialized template per each player:

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

工作演示这里

这篇关于Ember组绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！