Ember.js - как отобразить розетку по умолчанию в представлении компонента

У меня есть повторно используемый компонентный вид под названием box-modal.js в /app/templates/components/box-modal.js. Он содержит выход, в котором я хочу отобразить шаблон по умолчанию.

<div>
  {{outlet main}}
</div>

Шаблон, который я хочу отображать по умолчанию в розетке, находится в /app/templates/default_box.hbs.

Я знаю, что вы можете использовать функцию renderTemplate в файле маршрутизатора для обычных шаблонов, но она не работает для шаблонов компонентов:

/app/routes/components/box-modal.js

import Ember from "ember";

var BoxModalRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('default_box', {
      into: 'components.box-modal',
      outlet: 'main'
    });
}
export default BoxModalRoute;

Есть ли стандартизированный способ отрисовки шаблонов в представлениях компонентов в Ember-cli?


components render routing ember.js ember-cli
person Peter Kim    schedule 06.01.2015    source источник
comment
Просто для проверки, но вы экспортируете созданный маршрут, export default BoxModelRoute;, верно? Вы проверили, что используется renderTemplate?   -  person Oren Hizkiya    schedule 06.01.2015
comment
о, да, я сделал экспорт. я отредактирую.   -  person Peter Kim    schedule 06.01.2015

Ответы (2)


arrow_upward
5
arrow_downward

Компонент должен быть изолированным в вашем приложении, поэтому в идеале он не должен иметь доступа или зависеть от внешних факторов.

Что вы можете сделать, так это использовать свой компонент для обертывания шаблона.

<div class="modal-component">
  {{yield}}
</div>

А затем заверните свой шаблон в компонент.

{{#box-modal}}
  {{partial "default_box"}}
{{/box-modal}}

Чтобы использовать частично, ваше имя шаблона должно начинаться с подчеркивания /app/templates/_default_box.hbs

Сгенерирует

<div class="modal-component">
  <whatever is in /app/templates/_default_box.hbs />
</div>
person Asgaroth    schedule 06.01.2015
comment
Не могли бы вы пояснить, что вы имеете в виду, используя мой компонент для обертывания шаблона? - person Peter Kim; 06.01.2015
comment
Используйте свой компонент как блок и поместите внутрь свой шаблон. - person Asgaroth; 06.01.2015
comment
Верхнее подчеркивание для частичных слов больше не требуется. См. github.com/emberjs/ember.js/issues/2242 и github.com/emberjs/ember.js/pull/3017 - person Kalman; 06.01.2015
comment
Отлично, тогда еще нужно обновить документы. emberjs.com/guides/templates/rendering -with-helpers / - person Asgaroth; 06.01.2015
comment
будет ли это работать с действиями? У меня есть список интерактивных элементов, которые необходимо отрисовать частично в зависимости от того, какой элемент был нажат. Как я могу отрендерить другой партиал в этой ситуации? - person Peter Kim; 06.01.2015
comment
Это сработает с действиями, я не уверен, что понимаю, что вы пытаетесь сделать. - person Asgaroth; 06.01.2015
comment
Хорошо, да, мне сложно объяснить мою ситуацию без изображений, но я попробую. У меня есть модальное окно с несколькими ссылками, каждая из которых отображает другой вид внутри этого модального окна. Когда модальное окно открывается впервые, оно должно отображать вид по умолчанию, и оттуда он будет меняться в зависимости от того, какой элемент был нажат. Это вообще ясно? - person Peter Kim; 06.01.2015

arrow_upward
0
arrow_downward

Компонент расширяет представление, поэтому, как и компоненты представления, имеют свойства layoutName и templateName. Вы можете использовать эти свойства, чтобы указать, как отображать ваш шаблон. Официальное описание см. здесь.

Так, например, ваш компонент может выглядеть следующим образом:

App.BoxModalComponent = Ember.Component.extend({
  layoutName: "box_modal",
  templateName: "box_modal_template"
});

И ваш макет и шаблон могут выглядеть следующим образом:

  <script type="text/x-handlebars" id="box_modal">
    <h2>Box Modal</h2>

    {{ yield }}
  </script>

 <script type="text/x-handlebars" id="box_modal_template">
  <h4>Inside Box Modal</h4>
 </script>

Рабочая демонстрация здесь

ОБНОВЛЕНИЕ

Кроме того, если вы используете шаблон, который ожидает визуализации некоторого контекста, этот контекст необходимо будет передать в компонент, поскольку компонент изолирован от ваших маршрутов / контроллеров (как @Asgaroth указывает в своем ответе).

В следующем примере показано, как передать context => component => template http://emberjs.jsbin.com/baminu/2/edit

person Kalman    schedule 06.01.2015