我试图通过一个简单的例子来理解Ember路由和模板渲染。我有一个如下页面:
<html>
<head>.....</head>
<body>
<script type="text/x-handlebars" data-template-name="cars">
cars<br/>
</script>
<script type="text/x-handlebars" data-template-name="cars/new">
cars new
</script>
<script type="text/x-handlebars">
<header id="header">
{{outlet header}}
</header>
<section id="main">
{{outlet main}}
</section>
<footer id="footer">
Some footer
</footer>
</script>
<!--lib files-->
<!--script will go here-->
</body>
</html>
在整个应用程序中,所有内容都需要输入主插座。我有一个包含以下内容的javascript文件:
window.App = Ember.Application.create();
App.Router.map(function() {
this.resource("cars",function (){
this.route("new");
});
});
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.CarsRoute = Ember.Route.extend({
renderTemplate: function() {
this.render({ outlet: 'main' });
}
});
App.CarsNewRoute = Ember.Route.extend({
renderTemplate: function() {
this.render({ outlet: 'main' });
}
});
问题是cars
模板是正确呈现的,而cars/new
则没有。我该如何纠正这个问题?
答案 0 :(得分:1)
不确定所有插座是否必要 - 但我认为可以让你跑步的最简单的改变是改变
<script type="text/x-handlebars" data-template-name="cars">
到
<script type="text/x-handlebars" data-template-name="cars/index">
并添加
<script type="text/x-handlebars" data-template-name="cars">
{{outlet}}
</script>
问题在于它使用cars
模板作为cars/index
和cars/new
的父模板。 Ember会尝试将cars/new
渲染到插座中,但您尚未在cars
中指定一个插座。如果省略cars
模板,Ember将会弄清楚如何实现这一目标,但在您的控制台中没有通知的情况下。
答案 1 :(得分:0)
t当您明确告知要在特定插座中渲染的路线时,我认为您需要先断开该插座,然后才能在其中呈现新内容。特别是如果新路线是该出口现有路线的孩子。
通常,您需要将汽车渲染为通用{{outlet}}
,而汽车/新车应该渲染到汽车模板中的另一个{{outlet}}
。
如果您想继续按照自己的方式继续这样做,则需要在{/ 1}} 之类的操作中调用disconnectOutlet()
才能呈现新模板。但我可以想象这会让人感到困惑。
它的价值,这就是我尝试它的方式。
willTransition()
其他一些需要考虑的事项:
如果发生错误,ember将不会自动切换到子状态。您还需要明确定义错误路由来执行此操作...同样的事情是加载子状态...并且字面上您应用中的每个路由都需要连接和断开{{1} }