Ember.js重定向到模板

我有一個匹配列表，當我單擊一個時，我想顯示匹配。我知道我可以做一個Master-Detail風格的頁面，當我點擊一個頁面時，我可以在同一頁面上看到插口，但那不是我想要的。Ember.js重定向到模板

我想要它，所以當我點擊一個鏈接時，它會進入一個全新的比賽頁面。我不確定如何去做這件事。

這裏是我的#/matches路線（在CoffeeScript中）

App.MatchesRoute = Ember.Route.extend(
    model: -> 
    App.Match.find() 
)

這裏是我的matches.handlebars

<div id="matches"> 
    {{#each match in controller}} 
    {{#linkTo "match" match class="panel six columns"}} 
     Match between {{match.player.name}} and {{match.opponent.name}} 
    {{/linkTo}} 
    <br /> 
    {{/each}} 
</div> 

// I know that if I have this outlet, it will render `match.handlebars` 
// right here, but I want it to be it's own page. 
// {{outlet}}

我只與Ember工作了幾天，所有的例子我發現使用Master-Detail視圖。

請讓我知道我可以從我的代碼中提供的任何其他信息。

來源

2013-03-10 ardavis

<編輯日期= 「2013年3月11日」 >

我已經推了this repository in GitHub。這是一個概念性的應用程序，它使用renderTemplate這種方式有點像你所描述的。

< /編輯>

在你的孩子的路線，使用renderTemplate掛鉤，以告訴應用程序來呈現特定的模板在特定{{outlet}}。例如：

Source Fiddle

App.Router.map(function() { 
    this.resource('matches', { path: 'matches' }, function() { 
     this.route('match', { path: 'match/:match_id' }); 
    }); 
}); 

App.MatchesRoute = Em.Route.extend({ 
    model: function() { 
     return App.Match.find(); 
    }, 
    setupController: function(controller, model) { 
     model = App.Match.find(); 
     controller.set('content', model); 
    }, 
    renderTemplate: function() { 
     this.render('matches', { 
      into: 'application' 
     }) 
    } 
}); 

App.MatchesMatchRoute = Em.Route.extend({ 
    model: function(params) { 
     return App.Match.find(params.match_id); 
    }, 
    setupController: function(controller, model) { 
     controller.set('content', model); 
    }, 
    renderTemplate: function() { 
     this.render('match', { 
      into: 'application' 
     }) 
    } 
});

這MatchesMatchRoute是設置以使它的模板（matches/match）插入application模板。而且由於只有一個{{outelet}}這個模板（見下文把手），我們沒有指定任何東西：

<script type="text/x-handlebars"> 
    <h1>App</h1> 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="matches"> 
    <h2>Matches</h2> 
    <ul> 
    {{#each match in controller}} 
     <li> 
      {{#linkTo matches.match match}} 
       {{match.title}} 
      {{/linkTo}} 
     </li> 
    {{/each}} 
    </ul> 
</script> 

<script type="text/x-handlebars" data-template-name="match"> 
    <h3>{{title}}</h3> 
    <p>{{description}}</p> 
</script>

如果你有多個網點的情況下，你必須哈默爾他們，就像在車把如下：

<script type="text/x-handlebars"> 
    <h1>App</h1> 
    {{outlet main}}<br /> 
    {{outlet nested}} 
</script>

然後你的路線也必須指定插座。例如：

Source Fiddle

[...route code...] 
renderTemplate: function() { 

    this.render('content', { 
     into: 'application', 
     outlet: 'main' 
    }); 

    this.render('buttons', { 
     into: 'application', 
     outlet: 'nested' 
    }); 

} 
[...route code...]

來源

2013-03-11 03:42:04 MilkyWayJoe

非常感謝您的令人難以置信的詳細的解答。今天晚上，當我有時間去研究它時，我會仔細研究一下。 :) – ardavis 2013-03-11 11:16:12

可以導致在模板中通過定義路由時，renderTemplate鉤來渲染成不同的模板的插座（請參閱指南：http://emberjs.com/guides/routing/rendering-a-template/）

爲了您例如，它可能是這樣的：

App.MatchRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
    this.render({ into: 'matches' }); 
    } 
});

來源

2013-03-11 03:06:27 CraigTeegarden

Ember.js重定向到模板

回答

相關問題