(Possible BUG) {{page-numbers}} is not changing display data.

[shiro-saber]

Hello, I'm facing this problem: I setup the pagination variables, and all look fantastic, until I click in the arrows, when I click, the page changes but the display content don't.

I have the next code: Controller

import Ember from 'ember';
import pagedArray from 'ember-cli-pagination/computed/paged-array';

export default Ember.Component.extend({
    pageCalif: 1,
    perPageCalif: 10,
    calificados: pagedArray('content.calificados.califExams', {page: Ember.computed.alias("parent.pageCalif"), perPage: Ember.computed.alias("parent.perPageCalif")}),
    totalCalifPages: Ember.computed.oneWay("calificados.totalPages"),
    pageNoCalif: 1,
    perPageNoCalif: 10,
    nocalificados: pagedArray('content.nocalificados.califExams', {page: Ember.computed.alias("parent.pageNoCalif"), perPage: Ember.computed.alias("parent.perPageNoCalif")}),
    totalNoCalifPages: Ember.computed.oneWay("nocalificados.totalPages")
});

Component view

<h3><span class="label label-info">Exámenes calificados</span></h3>
<div class="well well-lg">
    <div style="overflow-x:auto;">
        <table>
            <tr>
                <th>Título</th>
                <th>Fecha de aplicación</th>
                <th>Calificación</th>
                <th>Vigencia</th>
            </tr>
            {{#each calificados as |answer|}}
            <tr>
                <td>{{answer.report.copy_test.title}}</td>
                <td>&nbsp;{{moment-format answer.presented_at 'ddd DD-MMMM-YYYY' 'YYYY-MM-DD'}}</td>
                <td>&nbsp;{{answer.score}}</td>
                <td>&nbsp;{{moment-format answer.expiration_date 'ddd DD-MMMM-YYYY' 'YYYY-MM-DD'}}</td>
            </tr>
            {{else}}
              Lo sentimos aún no hay exámenes calificados.
            {{/each}}
        </table>
    </div>
    {{#if (gt calificados.totalPages 1)}}
    <div class="pager">
    {{page-numbers content=calificados}}
    </div>
    {{/if}}
</div><h3><span class="label label-info">Exámenes con Calificación pendiente</span></h3>
<div class="well well-lg">
    <div style="overflow-x:auto;">
        <table>
            <tr>
                <th>Título</th>
                <th>Fecha de aplicación</th>
                <th>Calificación</th>
                <th></th>
            </tr>
            {{#each nocalificados as |answer|}}
            <tr>
                <td>{{answer.report.copy_test.title}}</td>
                <td>&nbsp;{{moment-format answer.presented_at 'ddd DD-MMMM-YYYY' 'YYYY-MM-DD'}}</td>
                <td>&nbsp;Pendiente</td>
            </tr>
            {{else}}
             Aún no hay exámenes con calificación pendiente.
            {{/each}}
        </table>
    </div>
    {{#if (gt pagedContent.totalPages 1)}}
    <div class="pager">
    {{page-numbers content=nocalificados currentPage=pageNoCalif}}
    </div>
    {{/if}}
</div>

I really don't know whats happening, any clue? Is this a BUG?

I'm using:

DEBUG: Ember      : 2.9.1  
DEBUG: Ember Data : 2.12.1  
DEBUG: jQuery     : 3.1.1

[kbluescode]

@shiro-saber - I'm seeing a similar issue. Any resolution here?

Basically my first page renders fine, but my 2nd page isn't rendered. Then if I click back to the first page, for a split-second it shows the content that should have been displayed from the 2nd page.

Ember: 2.11.0
Ember Data: 2.11.1
jQuery: 3.2.1

[kbluescode]

@shiro-saber - I just fixed it actually. I just had to use the content property of the Component and stopped using the pagedArray constructor. To manipulate the page-numbers component now, I used: {{page-numbers content=content currentPage=page perPage=perPage totalPages=totalPages}}

As long as they're set explicitly there, you can bypass the need to set the page data on an object or anything.

tl;dr - set all the page variables on the component, then pass them through to page-numbers explicitly!