Wie wird Ajax-Seitenumbruch in EmberJS gehandhabt?

Question

Ich bin frischer zu EmberJS und habe begonnen, eine REST-Anwendung zu entwickeln. Derzeit möchte ich Seitenumbrüche für meine gelisteten Artikel implementieren. Ich habe ein wenig nach diesem Thema gesucht und kann nicht den besten Weg dazu finden.

Controller: Ich habe die Parameter in der Ember-URL mit queryParams extrahiert. Hier kann ich nicht herausfinden, wie man die geänderten Paginierungswerte anwendet.

export default Ember.Controller.extend({ 
queryParams:['page', 'size'], 
page: 1, 
size: 1, 
action: { 
    nextPage: function() { 
    this.page += 1; 
    //how to retrieve data here ? 
    }, 
    previousPage: function() { 
    this.pageNumber -= 1; 
    //how to retrieve data here ? 
    } 
} 
}) 

Strecke: diese Konfiguration in meiner Route folgend, konnte ich die Paginierung params in Ember URL API URL-Parameter zu übergeben.

export default Ember.Route.extend({ 
    model: function(params) { 
    return this.store.query('task', { 
    page: params.page, 
    _end: params.size 
    }); 
} 
}); 

Auch nach durch Anzahl der Referenzen Suche ich noch bin verwirrt, wie die Paginierung URL-Parameter in die Ansicht zu präsentieren und wie Sie die Änderungen Paginierung anzuwenden.

Ehrlich gesagt bin ich ein wenig verwirrt über das Gesamtkonzept selbst.

Eine kleine Erklärung diesbezüglich wäre sehr hilfreich.

Answer 1

Ich bin nicht genau sicher, was Ihr Problem ist, aber ich denke, es hängt damit zusammen, dass das Modell keine neuen Anforderungen an den Server aktualisiert und sendet?

Hier ist ein link zu einem Twiddle mit einer funktionierenden Version.

Eine kurze Erklärung folgt, mit Korrekturen zu Ihrem aktuellen Code.

Sehen Sie sich zuerst an, wie Sie Eigenschaften in diesen Aktionen in Ihrem Controller festlegen. Sie verwenden die Inkrementbetrieb + = die normalerweise richtig wäre, mit der Ausnahme, weil Sie ember verwenden, werden Sie .set (‚Eigentum‘, value) verwenden müssen:

//controllers/tasks.js 
export default Ember.Controller.extend({ 
queryParams:['page', 'limit'], 
page: 0, 
limit: 3, 
actions: { 
    nextPage: function() { 
    this.set('page',this.get('page') + 1) 
    }, 
    previousPage: function() { 
    this.set('page',this.get('page') - 1) 
    } 
} 
}) 

nun Ihre Route, Sie‘ Wahrscheinlich möchte ich Code hinzufügen, um das Modell zu aktualisieren, wenn sich die Abfrageparameter ändern. Werfen Sie einen Blick auf die Guides here für weitere Informationen.

//routes/tasks.js 
export default Ember.Route.extend({ 
    queryParams: { 
    page: { 
     refreshModel: true 
    } 
    }, 
    model: function(params) { 
    return this.store.query('task', { 
     page: params.page, 
     limit: params.limit 
    }); 
    } 
}); 

Und dann Ihre Vorlage, um die Aufgaben anzuzeigen:

//templates/tasks.hbs 
<button {{action 'nextPage'}}>Next</button> 
<button {{action 'previousPage'}}>Previous</button> 
Current Page:{{page}} 
<hr/> 
Tasks: {{model.length}} 
<hr/> 
<ul> 
{{#each model as |task|}} 
    <li>{{task.title}}</li> 
{{/each}} 
</ul>