0

Ember を使用してトーナメント ブラケットを作成しようとしていますが、問題が発生しています。マーチ マッドネスなので、4 つの異なる地域 (それぞれ 16 チーム) に分かれた 64 チームによるトーナメントです。基本的に、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>

うまくいけば、それは理にかなっています。この構造に基づいて、いくつかの繰り返し可能な要素があります: 4 つの領域と、領域内のゲームです。したがって、理論的には、次を使用してビルドできるはずです。

  • 2 つのコントローラー:BracketControllerおよびRegionController
  • 3 ビュー: BracketView, RegionView,GameView
  • 3 つのテンプレート: bracket、region、game

たとえば、BracketController4 つのメソッドがあり、それぞれが地域を表すゲームの異なるサブセット ( 、 など) を返しregionOneGamesますregionTwoGames。そして、RegionController4 つのメソッドがあり、それぞれがラウンドを表すゲームの異なるサブセットを返します。そして、私のテンプレートは次のようになります。

# 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

これは、私がここで尋ねた質問に似ています：EmberJSの再利用可能なコンポーネント/ビュー

@TommyKeyによって作成されたjsfiddleを変更して、残り火オブジェクトまたは配列にバインドし、それをビューで使用する方法を示しました。 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 に答える