提供客户端分页 Backbone.js答案

【问题标题】：Provide client-side pagination Backbone.js提供客户端分页 Backbone.js
【发布时间】：2015-07-17 13:25:34
【问题描述】：

我正在编写backbone.js 中的代码，并且尝试一次获取15 个项目的分页时遇到问题。

型号：

window.Quote = Backbone.Model.extend({});

收藏：

window.Quotes = Backbone.Collection.extend({
model: Quote,
url: 'https://gist.githubusercontent.com/anonymous/8f61a8733ed7fa41c4ea/raw/1e90fd2741bb6310582e3822f59927eb535f6c73/quotes.json'
});

单引号视图：

window.QuoteEntryView = Backbone.View.extend({
 tagName: "tr",
 template: _.template('<td><%- source %></td> <td><%- quote %></td> <td><%- theme %></td>'),
 render: function() {
 return this.$el.html(this.template(this.model.attributes));
 }
});

所有报价视图：

window.QuoteListView = Backbone.View.extend({
 tagName: "table",
 id: "myTable",
 className: "tablesorter",
 initialize: function() {
 this.collection.on('change', this.render, this);
 this.render();
 },
 render: function() {
 this.$el.children().detach();
 this.$el.html('<th>Source</th> <th>Quote</th> <th>Theme</th>').append(
  this.collection.map(function(quote){
    return new QuoteEntryView({ model: quote }).render();
  }) 
);
}
});

HTML：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js">  </script>
<link rel="stylesheet" type="text/css" href="./styles/myStyle.css">
</head>
<body>
<div id="main-view"></div>
<script src="./models/quotesModel.js"></script>
<script src="./views/singleQuotesView.js"></script>
<script src="./views/allQuotesView.js"></script>
<script src="./collections/allQuotes.js"></script>
<script>
$(function() {
    var postFetchBoot = function(collection) {
        $('#main-view').append(new QuoteListView({
            collection: collection
        }).$el);
    };
    new Quotes().fetch({
        success: postFetchBoot
    });
});
</script>
</body>
</html>

我已经包含了我的整个代码。我曾尝试使用“骨干分页器”，但在尝试将其附加到我的代码时遇到了麻烦。如果有人可以帮忙，请谢谢！

【问题讨论】：

你试过用 Backbone.PageableCollection 代替 Backbone.Collection 吗？
@Molda，我确实尝试过，但是我找不到任何好的示例来了解如何实现所有内容，还需要使用 backgrid.js 吗？

标签： javascript jquery html backbone.js pagination

【解决方案1】：

折腾了一阵子，终于搞定了。我已经包含了我重新工作的 html。

HTML:

<head>
<title>Jay C. Davé</title>
<link rel="stylesheet" href="./styles/bootstrap.css" />
<link rel="stylesheet" href="./styles/backgrid.css" />
<link rel="stylesheet" href="./styles/backgrid-paginator.css" />
</head>

<body>
<div id="main">
    <div class="col-md-12">
        <div id="grid"></div>
        <div id="paginator"></div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./lib/backbone.paginator.js"></script>
<script src="./lib/backgrid.js"></script>
<script src="./lib/backgrid.paginator.js"></script>

<script>
var columns = [{
    name: "quote",
    cell: "string",
    editable: false

}, {
    name: "context",
    cell: "string",
    editable: false
}, {
    name: "source",
    cell: "string",
    editable: false
}, {
    name: "theme",
    cell: "string",
    editable: false

}];
var Quotes = Backbone.PageableCollection.extend({
        url:"https://gist.githubusercontent.com/anonymous/8f61a8733ed7fa41c4ea/raw/1e90fd2741bb6310582e3822f59927eb535f6c73/quotes.json",
    mode: "client",
    state: {
        pageSize: 15
    }

});
var quotes = new Quotes();
var grid = new Backgrid.Grid({
    columns: columns,
    collection: quotes
});
var paginator = new Backgrid.Extension.Paginator({
    collection: quotes
});
$("#grid").append(grid.render().$el);
$("#paginator").append(paginator.render().$el);
quotes.fetch();
</script>
</body>

</html>

【讨论】：

嘿@JayDave 感谢分享答案。正是我想要的，并且发现很难操纵客户端分页。