在Ember中將自己的獨特數據嵌入視圖？

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向您展示可如何結合餘燼對象或數組，然後讓使用它你視圖。

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

在模板App.RegionView：

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

http://jsfiddle.net/ianpetzer/Tppmv/

基本上可以按如下方式插入視圖