Question

我正在使用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>

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

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

提供客户端分页Backbone.js

1 个答案: