Question

我试图通过一个简单的例子来理解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则没有。我该如何纠正这个问题？

Answer 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将会弄清楚如何实现这一目标，但在您的控制台中没有通知的情况下。

Answer 2

t当您明确告知要在特定插座中渲染的路线时，我认为您需要先断开该插座，然后才能在其中呈现新内容。特别是如果新路线是该出口现有路线的孩子。

通常，您需要将汽车渲染为通用{{outlet}}，而汽车/新车应该渲染到汽车模板中的另一个{{outlet}}。

如果您想继续按照自己的方式继续这样做，则需要在{/ 1}} 之类的操作中调用disconnectOutlet() 才能呈现新模板。但我可以想象这会让人感到困惑。

它的价值，这就是我尝试它的方式。

willTransition()

其他一些需要考虑的事项：

如果发生错误，ember将不会自动切换到子状态。您还需要明确定义错误路由来执行此操作...同样的事情是加载子状态...并且字面上您应用中的每个路由都需要连接和断开{{1} }

Emberjs模板无法渲染

2 个答案: