带有液体火焰的 Ember 加载模板

Question

我一直在对此进行大量修改，但似乎无法使其正常工作。我正在等待我的模型承诺返回时显示我的加载模板。

我的理解是，默认情况下，如果我有app/templates/loading.hbs，则此模板将在所有路由中呈现。但是，即使在我在路线之间切换时使用该模板，旧路线仍会显示，直到模型返回，此时我的液体火焰转换发生，您将被带到下一条路线。

我尝试了为每个路由创建嵌套加载模板的各种版本，尝试为加载模板的每个路由创建子路由，甚至弄乱了可用的 beforeModel/afterModel 方法，但我没有取得任何进展。这是我在发布之前想要跨越的最后一个障碍，我很困惑为什么我不能让它工作。这是我觉得相关的一堆代码。

注意：我使用的是 Ember CLI 和 Liquid Fire。我的数据也暂时从 am Ember Service 返回到模型中。

路由器

Router.map(function() {
  this.route('reviews', function() {
    this.route('index', {path: '/'});
    this.route('review', {path: '/:review_id'});
  });
  this.route('movies');
  this.route('about');
});

app/template/loading.hbs

<div class="content-container">
    <h1>Ish be loading</h1>
</div>

最慢​​的模型路线

export default Ember.Route.extend({
    activate() {
        this._super();
        $("html,body").animate({scrollTop:0},"fast");
        $("body").addClass('movies');
    },
    deactivate() {
        $("body").removeClass('movies');
    },
    model() {
        const movies = this.get('movies');
        return movies.getMoviesInAlphOrder();
    },
    afterModel: function() {
        $(document).attr('title', 'Slasher Obscura - Movie Database');
    },
    movies: Ember.inject.service()
});

app.js

App = Ember.Application.extend({
    modulePrefix: config.modulePrefix,
    podModulePrefix: config.podModulePrefix,
    Resolver,
    ...
});
loadInitializers(App, config.modulePrefix);

服务方法

sortReviewsByDateDesc(arr) {
        return arr.slice().sort(function (a, b) {
            return a.review.date > b.review.date ? -1 : 1;
        });
    },
    getSetAmountOfMovies(num, arr) {
        const movieList = arr ? null : this.getMovies();
        const trimmedList = arr ? arr.slice(0, num) : movieList.slice(0, num);        
        return trimmedList;
    },
    setFirstReviewToFeatured(arr) {
        arr[0].isFeatured = true;
        return arr;
    },
    getLatestReviews(num) {
        const movieList = this.getMovies();
        const reviewList = movieList.filterBy('review');
        const indexList = this.sortReviewsByDateDesc(reviewList);
        const latestList = this.getSetAmountOfMovies(num, indexList);
        return this.setFirstReviewToFeatured(latestList);
    },
    getMoviesInAlphOrder() {
        const movieList = this.getMovies();
        let lowerCaseA, lowerCaseB;
        return movieList.sort(function(a, b) {
            lowerCaseA = a.title.toLocaleLowerCase();
            lowerCaseB = b.title.toLocaleLowerCase();
            return lowerCaseA.localeCompare(lowerCaseB);
        });
    },
getMovies() {
        return [{
            id: 1,
            title: '303 Fear Faith Revenge',
            year: "1999",
            imdb: "tt0219682",
            youtube: "iFV1qaUWemA"
        }
...
]

我已经阅读了 Ember 网站上的文档以及其他各种 Google 资源，但似乎无法弄清楚为什么我的加载模板根本没有呈现。任何帮助都是极好的！谢谢！

Answer 1

当你的模型钩子返回一个需要很长时间才能解决的承诺时，加载模板触发，但是，你的模型钩子没有返回一个承诺。

model() {
  const movies = this.get('movies');

  return movies.getMoviesInAlphOrder();
}

getMoviesInAlphOrder 正在返回一个同步数组。在与您进一步交谈之后，事实证明您已经用 540 个项目预先填充了这个数组客户端，所以这里的问题是加载模板不仅没有等待的承诺，而且即使它有无论如何它会立即解决。

您的时间延迟很可能是由于呈现一长串项目而导致的性能问题。有几个 Ember 插件可以帮助解决这个问题，包括我自己的一个：https://github.com/runspired/smoke-and-mirrors

或者/此外，您可能需要考虑将数组“分块”成更小的位，并一次渲染 25-50 个，或者设置一些分页。