javascript - 奇怪的行为 Ember 无限插件

Question

我尝试在我的应用中实现 ember-infinity 附加组件，

所以我更新了我的 Api 以返回附加组件使用的相同元数据，但行为很奇怪。

我希望第一个 n 记录显示在我的 div 上，当我到达底部时它会触发下一个请求以及其他 20 条记录。

但这并没有发生，

当我请求我的索引页时，加载项开始根据 total_pages 数量触发 x 请求，这是奇怪的部分，我不知道理解为什么自动触发所有请求，也许是 ember 版本？。

为了澄清我的问题，这是我的代码。

元 API

"meta": {
        "page": 3,
        "per_page": 20,
        "total_pages": 3,
        "total_records": 58
    }

Ember 路线

// route/index.js
import Ember from 'ember';
import InfinityRoute from "ember-infinity/mixins/route";

export default Ember.Route.extend(InfinityRoute, {
    model() {
        return this.infinityModel('trademark', {perPage: 20, startingPage: 1});
    }
});

模板索引

<div class="row" id='list-trademarks'>
{{#each model as |trademark|}}
    <div class="col s12 m6 l4">
      <div class="card small" style='padding-top: 0 !important; margin-top: 0 !mportant'>

           {{card-limit-display relCards=trademark.marcanet title=trademark.title panref=trademark.id total=trademark.relatedTotal}}

        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">{{trademark.title}} similares.<i class="material-icons right">close</i></span>
          {{card-hidden hiddenCards=trademark.marcanet}}
        </div>
      </div>
    </div>
{{/each}}
{{infinity-loader infinityModel=model  destroyOnInfinity=true}}
</div>

Ember 信息

DEBUG: Ember           : 2.4.5
DEBUG: Ember Data      : 2.5.2 
DEBUG: jQuery          : 2.2.3

我正在关注 README但我无法让它工作。

Answer 1

问题是您正试图通过路由器模型 Hook 获取数据。您的路线没有改变，因此不会再次调用模型 Hook 。

我建议重构您的代码以获取组件中的数据。

1. 保持路由模型 Hook 为空

2. 创建一个包装器组件，您将在其中加载数据并缓存它，以便您可以添加和加载下一页

3. 在包装器组件中，您需要缓存页码

4. 在您可以在包装器组件中处理的 infinity-loader 组件上定义一个操作，它将告诉我下一页

5. 在包装器组件中实现从服务器获取数据的功能。我建议您在页码变量上创建一个观察者。所以你可以在 didInitAttrs 钩子(Hook)中运行它

包装器组件的实现可能如下所示:

export default Ember.Component.extend({
    pageNumber: 1
    items: null

    didInitAttrs: function (){
        this._super.apply(this, arguments)
        //We need to initialize array like this, because otherwise, if we have 
        //the component twice on the page then it will make problems, because it is the same object
        this.set(items, Ember.A())
    }

    // We call first this function during the didInitAttrs phase so we have the first page, and after that when the pageNumber changes
    getData: Ember.on('didInitAttrs', Ember.observer('pageNumber', function(){
        component = this;
        //Most likely it returns a promise
        this.infinityModel('trademark', {perPage: 20, startingPage: this.get('pageNumber')}).then(function (trademarks){
            component.get('items').pushObjects(trandemarks.toArray())
        })


    }))

    actions: {
        //incrementing page number, so the observer fires
        getNextPage: function(){
            this.set('pageNumber', this.get('pageNumber') + 1)
        }
    }
});