ember-data - 如何使用 store.filter/store.find 和 Ember-Data 实现无限滚动？

Question

本文最初发布于discuss.emberjs.com。看: http://discuss.emberjs.com/t/what-is-the-proper-use-of-store-filter-store-find-for-infinite-scrolling/3798/2

但是最近该网站的内容质量似乎变得越来越差，所以我希望 StackOverflow 能够拯救我。

意图:在 ember 中构建一个页面，并使用 ember-data 实现无限滚动。

背景知识:基于 emberjs.com 关于 ember-data 的 api 文档，特别是 store.filter 和 store.find 方法(请参阅: http://emberjs.com/api/data/classes/DS.Store.html#method_filter )我应该能够设置到存储过滤器操作的 promise 的路由的模型钩子(Hook)。 promise 的响应应该是一个经过过滤的记录数组，它是一个由过滤函数过滤的商店中的项目数组，每当新项目被插入商店时，该函数就会不断更新。通过将其与将项目插入商店的 store.find 方法相结合，filteredRecordArray 应自动更新新项目，从而更新模型并导致页面上显示新项目。

例如，假设我们有一个问题路由、 Controller 和一个问题类型的模型。

App.QuestionsRoute = Ember.Route.extend({
    model: function (urlParams) {
        return this.get('store').filter('question', function (q) {
            return true;
        });
    }
});

然后我们有一个带有某种方法的 Controller ，该方法将调用 store.find，这可以由某些事件/操作触发，无论是检测滚动事件还是用户显式单击以加载更多内容，无论该方法是否会被调用来加载更多问题。示例:

App.QuestionsController = Ember.ArrayController.extend({
    ...
    loadMore: function (offset) {
        return this.get('store').find('question', { skip: currentOffset});
    }
    ...
});

以及渲染项目的模板:

...
{{#each question in controller}}
   {{question.title}}
{{/each}}
...

请注意，使用此方法，我们不必必须向 store.find Promise 添加一个显式调用 this.get('model').pushObjects(questions); 的函数。事实上，一旦您已经将过滤器记录数组返回到模型，尝试这样做是行不通的。要么我们手动管理模型的内容，要么让 ember-data 来做这项工作，我非常想让 Ember-data 来做这项工作。这是一个非常干净的 API；然而，它似乎并不像我写的那样工作。根据文档，我看不出有什么问题。

使用 chrome 中的 Ember-Inspector 工具，我可以看到第二个 find 调用中的新问题已加载到“问题”类型下的存储中，但页面不会刷新，直到我更改路线并返回。看起来这只是观察者的问题，这让我认为这将是 Ember-Data 中的一个错误，但我不想跳到这样的结论，直到我询问我是否正在使用 Ember-数据符合预期。

如果有人不知道到底出了什么问题，但知道如何使用 store.push/pushMany 在 jsbin 中重新创建此场景，这也会有所帮助。我只是不熟悉如何在商店中使用较低级别的方法。

非常感谢您的帮助。

Answer 1

我只是让这个模式为自己工作，但是以“传统”方式，即不使用 store.filter()。

我管理了路由器本身的“loadMore”部分:

actions: {
    loadMore: function () {
        var model = this.controller.get('model'), route = this;
        if (!this.get('loading')) {
            this.set('loading', true);
            this.store.find('question', {offset: model.get('length')}).then(function (records) {
                model.addObjects(records);
                route.set('loading', false);
            });
        }
    }
}

由于您已经尝试过传统方式(从我在您的讨论帖子中看到的内容)，看来关键部分是像您一样使用 addObjects() 而不是 pushObjects() 。

作为记录，以下是我的 View 中触发 loadMore 操作的相关部分:

didInsertElement: function() {
    var controller = this.get('controller');
    $(window).on('scroll', function() {
        if ($(window).scrollTop() > $(document).height() - ($(window).height()*2)) {
            controller.send('loadMore');
        }
    });
},
willDestroyElement: function() {
    $(window).off('scroll');
}

我现在希望将加载属性移动到 Controller ，以便为用户获得一个不错的加载程序。