Динамический компонент вкладок, ожидающий перед переходом на следующую вкладку

Question

Я использую конфигурацию пользовательских вкладок, но, похоже, возникла проблема с загрузкой динамического содержимого (компонентов внутри панелей вкладок).

Компонент загружает обещание /s или выполняет некоторую обработку при инициализации, и при переключении на новую вкладку он не переключится сразу, а будет ждать, пока компонент завершит инициализацию.

то есть:

{{#bs-tab customTabs=true as |tab|}}

    {{#bs-nav type="tabs" as |nav|}}
        {{#nav.item active=(eq tab.activeId "edit")}}<a href="#edit" role="tab" {{action tab.select "edit"}}>Edit</a>{{/nav.item}}

     {{/bs-nav}}

    {{#tab.pane elementId="edit" title="Edit"}}
       {{#if (eq tab.activeId "edit")}}
          <h2>TEST</h2>//->this does not show until some-component finishes initialization

          {{some-component}}//->does some processing, promises or whatever on init
      {{/if}}
    {{/tab.pane}}

{{/bs-tab}}

Я попытался вручную установить и отслеживать activeId, подключив событие onChange, но эффект тот же.

Answer 1

Я не уверен, правильно ли я понял, что вы спрашиваете; но вот мои мнения о вашем случае. Прежде всего, компонент init Метод запускается, как только он отображается в шаблоне, независимо от того, активна ли соответствующая вкладка или нет. Это хорошо с точки зрения производительности приложений; потому что даже init будут запущены методы компонентов, для которых вкладки не видны. Тем не мение; Вы избежали этого при следующем условии!

   {{#if (eq tab.activeId "edit")}}

Если вы используете такой if операторы затем каждый раз, когда вы делаете переключение табуляции; будет создан новый компонент, а компонент на предыдущей вкладке будет уничтожен!!! Это может сильно ударить вас, если у вас есть тяжелая работа над вашими компонентами; создание и уничтожение компонентов будет дорогостоящим. Подумайте дважды, прежде чем сделать это, и убедитесь, что это то, что вы хотите!

Если у вас есть какие-то материалы для отображения после завершения инициализации компонента на вкладке, вы можете использовать действия ember как обычно. Пожалуйста, взгляните на следующую статью, которую я подготовил для вас.

В этом примере application.hbs содержит две вкладки, в которых находятся два разных компонента (my-component а также my-component2). my-component Метод init ждет 3 секунды, после чего выполняется инициализация, где как my-component2 ждет 10 секунд Я прошел то же действие (componentAtTabDoneInitializing) в application.js контроллер для обоих компонентов, так что контроллер будет уведомлен, когда каждый компонент завершает свою инициализацию. application контроллер следит за тем, какой компонент был инициализирован этим способом; следовательно, вы можете использовать, если tab1FinishedInitializing, tab2FinishedInitializing флаги внутри application.hbs,