0

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

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

IE：

{{#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，但效果相同。

4

1 回答 1

0

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

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

如果您使用此类if语句，那么每次进行选项卡切换时；将渲染一个新组件，并销毁上一个选项卡上的组件！！！如果您在组件上做一些繁重的工作，那可能会让您很吃力；创建和销毁组件的成本很高。在这样做之前请三思而后行，并确保这是您想要的！

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

在此示例中，application.hbs包含两个选项卡，其中包含两个不同的组件（my-component和my-component2）。my-componentinit 方法在完成初始化之前等待 3 秒，而 asmy-component2等待 10 秒。我已将控制器上的相同操作 ( componentAtTabDoneInitializing)传递application.js给两个组件，以便在每个组件完成初始化时通知控制器。控制器通过这种application方式跟踪哪个组件已完成初始化；因此您可以tab1FinishedInitializing在.tab2FinishedInitializingapplication.hbs

于 2017-04-24T12:57:47.980 回答