0

我正在尝试使用 Ember 构建锦标赛支架，但遇到了一些麻烦。这是疯狂三月，所以这是一场 64 支球队的锦标赛，分为 4 个不同的地区（每个地区有 16 支球队）。本质上，HTML 将如下所示：

<div id="bracket">
  <div id="reg_1" class="region">
    <ul class="rounds">
      <li class="round round_1"> <!-- 8 games -->
        <div class="game"></div>
        <div class="game"></div>
        <div class="game"></div>
        <div class="game"></div>
        <div class="game"></div>
        <div class="game"></div>
        <div class="game"></div>
        <div class="game"></div>
      <li>
      <li class="round round_2"> <!-- 4 games -->
        <div class="game"></div>
        <div class="game"></div>
        <div class="game"></div>
        <div class="game"></div>
      <li>
      <li class="round round_3"> <!-- 2 games -->
        <div class="game"></div>
        <div class="game"></div>
      <li>
      <li class="round round_4"> <!-- final game of the region -->
        <div class="game"></div>
      <li>
    </ul>
  </div>
  <div id="reg_2" class="region">ditto</div>
  <div id="reg_3" class="region">ditto</div>
  <div id="reg_4" class="region">ditto</div>
</div>

希望这是有道理的。基于这种结构，有几个可重复的元素：四个区域，以及区域内的游戏。因此，理论上，我应该能够使用以下内容构建它：

  • 2个控制器：BracketController和RegionController
  • 3 次观看：BracketView, RegionView,GameView
  • 3 个模板：bracket, region,game

例如，在BracketController我有四个方法，每个方法都返回代表一个区域的游戏的不同子集（regionOneGames、regionTwoGames等）。我RegionController有四种方法，每种方法都返回代表一轮的不同游戏子集。我的模板看起来像这样：

# bracket.handlebars

<div id="bracket">
  <div id="reg_1" class="region">{{view App.RegionView regionOneGames}}</div>
  <div id="reg_2" class="region">{{view App.RegionView regionTwoGames}}</div>
  <div id="reg_3" class="region">{{view App.RegionView regionThreeGames}}</div>
  <div id="reg_4" class="region">{{view App.RegionView regionFourGames}}</div>
</div>

^-- 这会产生错误，因为您不能将参数传递给视图。

# region.handlebars

<li class="round round_1">
  {{#each roundOneGames}}{{view App.GameView}}{{/each}}
</li>
<li class="round round_2">
  {{#each roundTwoGames}}{{view App.GameView}}{{/each}}
</li>
<li class="round round_3">
  {{#each roundThreeGames}}{{view App.GameView}}{{/each}}
</li>
<li class="round round_4">
  {{#each roundFourGames}}{{view App.GameView}}{{/each}}
</li>

^-- 我认为这个模板可以正常工作，但我无法做到这一点。我究竟做错了什么？

4

1 回答 1

1

这类似于我在这里提出的一个问题：Re-usable components/views for EmberJS

我已经修改了 @TommyKey 创建的 jsfiddle，以展示如何绑定到 ember 对象或数组，然后在视图中使用它。 http://jsfiddle.net/ianpetzer/Tppmv/

基本上，您可以按如下方式插入视图：

{{view App.RegionView regionGamesBinding="regionOneGames"}}

在 App.RegionView 的模板中：

{{#each game in view.regionGames}}
   {{game}}
{{/each}}
于 2013-02-14T05:42:26.830 回答