CODEWITHSUNDEEP
ember.jsember-data
NudeCanalTroll
NudeCanalTroll

Reputation: 2286

Nesting views with their own unique data in Ember?

I'm attempting to build a tournament bracket using Ember, but I'm running into some trouble. It's March Madness, so it's a 64-team tournament divided up into 4 different regions (each with 16 teams). Essentially, the HTML will look like this:

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

Hopefully that makes sense. Based on this structure, there are several repeatable elements: the four regions, and the games within the regions. So, theoretically, I should be able to build it using the following:

For example, in BracketController I'd have four methods, each of which returns a different subset of the games representing a region (regionOneGames, regionTwoGames, etc). And in RegionController I'd have four methods, each which returns a different subset of games representing a round. And my templates would look something like this:

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

^-- This gives an error, because you can't pass an argument to a view.

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

^-- I assume this template would work just fine, but I can't get this far. What am I doing wrong?

Upvotes: 0

Views: 166

Answers (1)

ianpetzer
ianpetzer

Reputation: 1838

This is similar to a question that I asked here: Re-usable components/views for EmberJS

I've modified the jsfiddle created by @TommyKey to show how you can bind to an ember object or array and then make use of it in your view. http://jsfiddle.net/ianpetzer/Tppmv/

Basically you could insert a view as follows:

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

In the template for App.RegionView:

{{#each game in view.regionGames}}
   {{game}}
{{/each}}

Upvotes: 1

Related Questions