EmberJSでajaxページネーションはどのように処理されますか？

Question

私はEmberJSより新しく、RESTアプリケーションの開発を開始しました。 現在、リストされたアイテムにページネーションを実装したいと考えています。私はこのことに関してちょっと調べて、それに至る最善の方法を見つけ出すことができないようだ。

コントローラ： 私は、queryParamsを使用してember URLのパラメータを抽出しました。 ここでは、変更されたページ番号を適用する方法を理解できません。

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

ルート：私のルートでこの構成に続いて、私はAPIのURLパラメータにエンバーURLでページネーションのparamsを渡すことができました。

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

でも参照の数を検索した後、私は、ビューとどのようにページ付けに変更を適用するに改ページのURLパラメータを提示する方法についてはまだ混乱しています。

率直に言えば、全体的なコンセプトそのものについて少し混乱しています。

これに関する少しの説明が非常に役に立ちます。

Answer 1

私はあなたの問題が何であるか正確にはわかりませんが、モデルに更新やサーバーへの新しいリクエストの送信がないことがモデルに関係していると思いますか？

ここには、作業バージョンのついたひねりに対するlinkがあります。

あなたの現在のコードを修正した簡単な説明が続きます。

まず、コントローラのアクションでプロパティを設定する方法を見てみましょう。あなたは残り火を使用しているので、あなたが（「プロパティ」値）.SET使用する必要がありますを除いて、通常は、正しいだろう+ =インクリメント操作を使用します。

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

は、今すぐあなたのルート、あなたは」おそらく、クエリパラメータが変更されると、モデルを更新するコードをいくつか追加することになります。詳細はhereのガイドをご覧ください。

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

そしてタスクを表示するには、テンプレート：偉大な作業を

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