ember.js - Nesting views with their own unique data in Ember? -

ember.js - Nesting views with their own unique data in Ember? -

i'm attempting build tournament bracket using ember, i'm running trouble. it's march madness, it's 64-team tournament divided 4 different regions (each 16 teams). essentially, html 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 part --> <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 makes sense. based on structure, there several repeatable elements: 4 regions, , games within regions. so, theoretically, should able build using following:

2 controllers: bracketcontroller , regioncontroller 3 views: bracketview, regionview, gameview 3 templates: bracket, region, game

for example, in bracketcontroller i'd have 4 methods, each of returns different subset of games representing part (regiononegames, regiontwogames, etc). , in regioncontroller i'd have 4 methods, each returns different subset of games representing round. , templates 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>

^-- gives error, because can't pass argument 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>

^-- assume template work fine, can't far. doing wrong?

this similar question asked here: re-usable components/views emberjs

i've modified jsfiddle created @tommykey show how can bind ember object or array , create utilize of in view. http://jsfiddle.net/ianpetzer/tppmv/

basically insert view follows:

{{view app.regionview regiongamesbinding="regiononegames"}}

in template app.regionview:

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

ember.js ember-data