gpt4 book ai didi

Ember.js 重定向到模板

转载 作者:行者123 更新时间:2023-12-02 06:05:35 24 4
gpt4 key购买 nike

我有一个匹配列表,当我单击一个时,我想显示匹配。我知道我可以做一个主从样式页面,当我单击一个时,我可以在同一页面的某个地方看到 socket ,但这不是我想要的。

我想要它,以便当我点击一个链接时,它会转到一个全新的匹配页面。我真的不知道该怎么做。

这是我前往 #/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 View 。

请让我知道我可以从我的代码中提供的任何其他信息。

最佳答案

<编辑日期="2013 年 3 月 11 日">

我推了this repository in GitHub .这是一个使用 renderTemplate 的概念应用程序有点像你描述的方式。



在您的子路由中,使用 renderTemplate 钩子(Hook)以告诉您的应用程序在特定 {{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}}这个模板(见下面的 Handlebars ),我们不必指定任何东西:
<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>

如果您有多个 socket 的场景,则必须对它们进行限制,如下面的 Handlebars :
<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...]

关于Ember.js 重定向到模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15329177/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com