<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <!-- Created using JS Bin http://jsbin.com Copyright (c) 2015 by machty (http://jsbin.com/ucanam/4075/edit) Released under the MIT license: http://jsbin.mit-license.org --> <meta name="robots" content="noindex"> <title>JS Bin</title> <script> ENV = { ENABLE_ALL_FEATURES: true }; </script> <script src="http://127.0.0.1:8887/BSP/src/bsp/bower_components/jquery/dist/jquery.js"></script> <script src="http://127.0.0.1:8887/BSP/src/bsp/bower_components/handlebars/handlebars.js"></script> <script src="http://127.0.0.1:8887/BSP/src/bsp/bower_components/ember/ember.debug.js"></script> <script src="http://127.0.0.1:8887/BSP/src/bsp/bower_components/ember/ember-template-compiler.js"></script> <style id="jsbin-css"> .active { font-weight: bold; } table { width: 100%; } form { margin: 1em 0; } th { font-weight: normal; } </style> </head> <body> <script type="text/x-handlebars" data-template-name="application"> <h2>Query Params: client-side sorting</h2> <p> In this example, we're not bothering querying the server for data but just sorting and paginating what we have already loaded on the client-side. </p> <p> <a href="http://jsbin.com/ucanam/2942">See here</a> for an example of how to opt into a full on transition that can re-query the server to manage pagination/sorting on the server side. </p> <p> Page: {{#each n in pages}} {{linkTo n (query-params page=n)}} {{/each}} of {{pages.length}} </p> <p> {{#if previousPage}} {{link-to 'Previous' (query-params page=previousPage)}} {{else}} Previous {{/if}} {{#if nextPage}} {{link-to 'Next' (query-params page=nextPage)}} {{else}} Next {{/if}} </p> <h3>Sorting by {{sortBy}}</h3> <form {{action 'updatePageSize' on='submit'}}> Page size: {{input value=newPageSize type="number"}} {{input type="submit" value="Change"}} </form> <table> <thead> <tr> <th> {{linkTo "First Name" (query-params sortBy="firstName")}} </th> <th> {{linkTo "Last Name" (query-params sortBy="lastName")}} </th> <th> {{linkTo "Location" (query-params sortBy="location")}} </th> </tr> </thead> <tbody> {{#each paged}} <tr> <td>{{firstName}}</td> <td>{{lastName}}</td> <td>{{location}}</td> </tr> {{/each}} </tbody> </table> </script> <script> App = Ember.Application.create(); App.ApplicationRoute = Ember.Route.extend({ model: function() { var FIRST_NAMES = ["Alex", "Kris", "Luke"]; var LAST_NAMES = ["Matchneer", "Selden", "Melia"]; var people = []; for (var i = 0; i < 400; i++) { people.push( { firstName: FIRST_NAMES[Math.floor(Math.random() * 3)], lastName: LAST_NAMES[Math.floor(Math.random() * 3)], location: FIRST_NAMES[Math.floor(Math.random() * 3)] + "ville" }); } return people; } }); // Helper computed property used by nextPage // and previousPage. var incrementPage = function(amt) { return Ember.computed('page', 'numPages', function() { var newPage = this.get('page') + amt; if (newPage <= this.get('numPages') && newPage >= 1) { return newPage; } }); }; App.ApplicationController = Ember.ArrayController.extend({ queryParams: ['sortBy', 'page', 'pageSize'], page: 1, pageSize: 25, sortBy: 'firstName', sortProperties: function() { return [this.get('sortBy')]; }.property('sortBy'), pages: function() { var pageSize = this.get('pageSize'), l = this.get('model.length'), pages = Math.ceil(l / pageSize), pagesArray = []; for(var i = 0; i < pages; i ++) { pagesArray.push(i + 1); } return pagesArray; }.property('pageSize', 'model.length'), numPages: function() { var pageSize = this.get('pageSize'), l = this.get('model.length'); return Math.ceil(l / pageSize); }.property('pageSize'), //总页数 paged: function() { var page = this.get('page') - 1, pageSize = this.get('pageSize'), start = page * pageSize, end = start + pageSize; return this.get('arrangedContent').slice(start, end); }.property('page', 'arrangedContent', 'pageSize'), previousPage: incrementPage(-1), nextPage: incrementPage(1), // We don't want updates to the newPageSize // input field to immediately update `pageSize` // (and therefore the URL), so we make this // binding read-only (and later explicitly // write `pageSize` inside the `updatePageSize`) newPageSize: Ember.computed.oneWay('pageSize'), actions: { updatePageSize: function() { this.set('pageSize', parseInt(this.get('newPageSize'), 10)); } } }); </script> </body> </html>
链接http://emberjs.jsbin.com/ucanam/4075#/?pageSize=16&sortBy=location