码迷,mamicode.com
首页 > Web开发 > 详细

Emberjs 分页

时间:2015-08-06 20:05:37      阅读:290      评论:0      收藏:0      [点我收藏+]

标签:

<!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, were 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 dont 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

Emberjs 分页

标签:

原文地址:http://www.cnblogs.com/xjinza/p/4708956.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!