Ember.js 如何在Ember中显示加载微调器时保持UI的部分可用？

通过以下文档和SO答案，我成功且非常轻松地在Ember CLI中实现了加载微调器：

但是，我的应用程序由一系列过滤器/选项组成，比如Kayak类型的UI，我希望UI在微调器显示时保持可见和可用。现在，微调器将替换整个视图，直到完成为止。想要选择4个复选框的用户必须单击并等待每个复选框

在这篇博文中，我发现了如何覆盖路由上的加载操作，但我不确定如何在页面的结果部分覆盖微调器，而不是让它完全接管

我目前没有使用Ember的嵌套路线功能，但我从同一篇博文中收集到，也许在某个时候屈服，然后让装载路线成为一个孩子可以工作，但一些更具体的方向将非常有用

下面是我的代码的大致情况

路由器.js

Router.map(function() {
    this.resource('listings', {path: '/'}

listings.hbs

<!-- filters -->
{{#each category in category_options}}
  {{active-button category=category selectedCategories=categories action="filterCategory"}}
{{/each}}
<!-- end filters -->

<!-- results - want to replace this with spinner -->
{{#each listing in model}}
  <!-- various listing details -->
{{/each}}

<!-- filters -->
{{#each category in category_options}}
  {{active-button category=category selectedCategories=categories action="filterCategory"}}
{{/each}}
<!-- end filters -->

{{outlet 'loading'}}
<div id="main">
<!-- results - want to replace this with spinner -->
{{#each listing in model}}
  <!-- various listing details -->
{{/each}}

加载.hbs

<div class="spinner">
<p>Loading</p>
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

---

我用下面的代码解决了99%的问题。我不是说100%，因为我仍然会遇到一个错误，当页面第一次加载时，它无法找到要连接的出口。这是因为从技术上讲，出口还不存在——当第一次加载开始时，页面还没有呈现。我还不知道怎么解决这个问题。在加载函数中调用this.render可以使其工作，但是disconnectOutlet不能正常工作

除此之外，我的工作内容如下：

routes/listings.js

import Ember from 'ember';

var ListingsRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.findQuery('listing', params); // a slow query
  },
  afterModel: function () {
    this.disconnectOutlet({
        parentView: 'listings',
        outlet: 'loading'
    });
    $('div#main').show(); // show the results section again
  },

  actions: {
    loading: function(transition, originRoute) {
        this.render('listings/loading', {
            into: 'listings',
            outlet: 'loading'
        });
        $('div#main').hide(); // hide the search results section
        return false;
    },
  },
});

export default ListingsRoute;

templates/listings.hbs

<!-- filters -->
{{#each category in category_options}}
  {{active-button category=category selectedCategories=categories action="filterCategory"}}
{{/each}}
<!-- end filters -->

<!-- results - want to replace this with spinner -->
{{#each listing in model}}
  <!-- various listing details -->
{{/each}}

<!-- filters -->
{{#each category in category_options}}
  {{active-button category=category selectedCategories=categories action="filterCategory"}}
{{/each}}
<!-- end filters -->

{{outlet 'loading'}}
<div id="main">
<!-- results - want to replace this with spinner -->
{{#each listing in model}}
  <!-- various listing details -->
{{/each}}

我把loading.hbs放在模板/列表中/

---

希望这对其他人有所帮助。

阅读如何使用modals帮助我了解如何将模板渲染到outlet中。现在，我可以通过在模板中添加一个插座来加载微调器，但当模型完成更新时，它不会像应该的那样被拆除。