Question

我尝试在我的应用中实现ember-infinity插件，

所以我更新了我的Api以返回加载项的相同元使用，但行为很奇怪。

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

但它不会发生，

当我请求我的索引页面时，加载项开始根据x号码触发total_pages个请求，这是奇怪的部分，我不明白为什么要解雇所有请求自动，也许是ember版本？。

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

Meta API

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

ember route

// 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

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

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

保持路线模型挂钩
创建一个包装器组件，您将在其中加载数据并对其进行缓存，以便您可以添加+加载下一页
在包装器组件中，您需要缓存页码
在infinity-loader组件上定义一个动作，你可以在包装器组件中处理它，这将告诉我下一页
实现函数以从包装器组件中的服务器获取数据。我建议你在页码变量上创建一个观察者。所以你可以在didInitAttrs钩子

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

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)
        }
    }
});

奇怪的行为ember infinity插件

1 个答案: