Question

我正在尝试使用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>

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

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

在Ember中使用自己独特的数据嵌套视图？

1 个答案: