Как визуализировать шаблон, отличный от приложения.hbs в EmberJS?

в EmberJS основным файлом шаблона является application.hbs. Любой шаблон вынесла из маршрутов идет {{outlet}} этого основного файла шаблона.

теперь у меня есть другой основной файл шаблона, скажем print.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 маршрут? Пожалуйста помочь.

7
ember.js templates

1 ответов

вы не можете легко изменить шаблон приложения. Эмбер не слушает 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")
});

Это JSBin продемонстрирует, почему это, к сожалению,тоже не работает. Согласно этот сообщение об ошибке, руль Эмбер путается, когда есть несколько 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 здесь.

4