javascript - 如何在没有路由的情况下将内置选项卡与 ember 集成，以便为每个选项卡异步加载模型

Question

我有一个使用带有两个选项卡的 ember 的应用程序，一个用于 articles，另一个用于 hotArticles。这是模板:

<a class="item" data-tab="hot">Hot</a>
<a class="item active" data-tab="all">All</a>
<div class="ui tab" data-tab="all">
  {{article-list articles=articles}}
</div>
<div class="ui tab" data-tab="hot">
  {{article-list articles=hotArticles}}
</div>

articles 应该返回 api/articles，hotArticles 应该返回 api/articles?filter=hot，这是路由和 Controller :

export default Ember.Route.extend({
    model: function() {
        return this.store.find('article');
    }
});

export default Ember.ArrayController.extend({
  articles: function() {
    return this.get('model');
  }.property('model'),

  hotArticles: function() {
    return this.store.find('article', { filter: 'hot' });
  }.property('')
});

这是根本错误的。明显的问题是当页面加载时，两个请求都会发出，但在选择选项卡之前不应加载 hotArticles。

一个可能的解决方案可能是将每个选项卡的路由分开，但这会破坏模板。选项卡功能在不引入任何路由的情况下工作，我希望它保持这种状态。具体来说，我正在使用 semantic-ui标签。

Answer 1

我确实遇到了这个问题，我的处理方式是将选项卡内容包围在条件 block 中。例如:

<div class="ui tab" data-tab="all">
    {{#if showAllTab}}
        {{article-list articles=articles}}
    {{/if}}
</div>
<div class="ui tab" data-tab="hot">
    {{#if showHotTab}}
        {{article-list articles=hotArticles}}
    {{/if}}
</div>

这确实需要您维护一组额外的变量来打开和关闭选项卡，但它完全符合您的要求。它在不使用时将这些部分从 DOM 中完全移除，并且仅在组件实际放入 DOM 时才处理组件背后的数据。

我敢肯定还有其他方法，但这种方法简单而且效果很好。