templates - 如何在 EmberJS 中呈现除 application.hbs 以外的模板？

Question

在 EmberJS 中，主要的模板文件是 application.hbs .从路由呈现的任何模板都将使用 {{outlet}}这个主模板文件。

现在，我有另一个主模板文件，比如 print.hbs其中模板设计与application.hbs有很大不同。我该怎么做呢？

在路由器文件中，我有:

App.Router.map(function() {

    this.resource('print', function() {
        this.route('display1');
        this.route('display2');
    });

    this.route('dashboard', {path: '/'});
    this.route('anything');
});

路线 dashboard和 anything使用 application.hbs .
我该怎么做才能使用 print.hbs在 print路线？请帮忙。

Answer 1

您无法轻松更改应用程序模板。 Ember 不听 templateName当您尝试自己重新渲染模板时，属性会发生变化并且响应不佳。

一个很好的方法是在您的应用程序模板中使用不同的部分，具体取决于您是处于“屏幕”还是“打印”模式。

  <script type="text/x-handlebars">
    {{#if isPrint}}
      {{partial "application-print"}}
    {{else}}
      {{partial "application-normal"}}
    {{/if}}
  </script>

  <script type="text/x-handlebars" data-template-name="application-normal">
    <div id="app-normal">
      <h2>Normal template</h2>

      {{outlet}}
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="application-print">
    <div id="app-print">
      <h2>Print template</h2>

      {{outlet}}
    </div>
  </script>

App.ApplicationController = Ember.Controller.extend({
  isPrint: false,
  currentPathChange: function () {
    var currentPath = this.get("currentPath");
    var isPrint = currentPath ? currentPath.indexOf("print") === 0 : false;
    this.set("isPrint", isPrint);
  }.observes('currentPath').on("init")
});

This JSBin将证明为什么这不幸也不起作用。根据 this bug report , Ember 的 Handlebars 在有多个时会变得困惑 outlet同一页面中的指令，即使它们在不同的 #if范围。

在此问题得到解决之前，我提出以下稍微修改的解决方案。

应用程序模板为空。正常和打印部分各一个模板。

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

  <script type="text/x-handlebars" data-template-name="normal">
    <div id="app-normal">
      <h2>Normal template</h2>

      {{outlet}}
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="print">
    <div id="app-print">
      <h2>Print template</h2>

      {{outlet}}
    </div>
  </script>

在路由器中，一切都进入正常和打印资源。普通资源放在/，这样所有的链接都保持不变。无需在 ApplicationController 中进行特殊编码。

App.Router.map(function() {
  this.resource("print", function () {
    this.route("a");
    this.route("b");
  });

  this.resource("normal", {path: "/"}, function () {
    this.route("a");
    this.route("b");
  });
});

工作jsbin here .