Question

我正在使用自定义标签配置，但似乎在加载动态内容（标签窗格中的组件）时遇到问题。

组件加载promise / s或在init上进行一些处理，当切换到新选项卡时，它不会立即切换，而是等到组件完成初始化。

即：

{{#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}}

我尝试通过挂钩onChange事件手动设置和跟踪activeId，但效果相同。

Answer 1

我不确定我是否得到了你正确的要求;但这是我对你案件的看法。首先，组件的init方法在模板中呈现时会立即运行，无论相关选项卡当前是否处于活动状态。这在应用程序性能方面很好;因为即使是标签不可见的组件的init方法也会开始运行。然而;你已经避免了以下情况！

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

如果您使用此类if语句，则每次进行制表符切换时;将呈现一个新组件，并且前一个选项卡中的组件将被销毁！如果你的组件工作繁重，那可能会给你带来困难;创建和销毁组件将是昂贵的。在这样做之前要三思而后行，确保这就是你想要的！

如果在选项卡中初始化组件完成后要显示某些内容，则可以像往常一样使用ember操作。请查看我为您准备的以下twiddle。

在此示例中，application.hbs包含两个标签，其中包含两个不同的组件（my-component和my-component2）。 my-component初始化方法在完成初始化之前等待3秒，其中my-component2等待10秒。我已将componentAtTabDoneInitializing控制器上的相同操作（application.js）传递给两个组件，以便在每个组件完成初始化时通知控制器。 application控制器通过这种方式跟踪正在初始化的组件;因此，如果tab1FinishedInitializing内有tab2FinishedInitializing，application.hbs个标记，则可以使用。

标签动态组件在切换到下一个标签之前等待

1 个答案: