Emberjs 分页 

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

posted @ 2015-08-06 19:37  xjinza  阅读(211)  评论(0)  编辑  收藏  举报