私はbackbone.jsを学習しようとしていますが、この演習では、コレクションの要素を表示するビューがあります。このコレクションは、次のようにjsonファイルをエクスポートするバックエンドからデータをフェッチします。
{
"users": [
{
"name": "Jeffrey Way",
"age": 27
},
{
"name": "John Doe",
"age": 50,
"occupation": "web designer"
},
{
"name": "Sally Doe",
"age": 29,
"occupation": "graphic designer"
}
],
"count": 9, // total users
"page": 0, // current page
"pages": 2 // total page
}
この例ではページネーションを挿入するのが好きですが、方法がわかりません。かっこいいと思われるコンポーネントBackbone.paginatorがあることを私は知っています。私の例にBackbone.paginatorを挿入するのを手伝ってもらえますか？私の目的のためにページ付けを実装する別の方法を知っている場合は、私に説明してもらえますか？
これは私のindex.htmlです
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>User List</title>
<meta name="description" content="" />
<meta name="keywords" value="" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css" />
<style>
body {
margin: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
.pagination {
text-align: center;
}
</style>
<!-- Templates -->
<script type="text/template" id="tpl-user">
user: <%= name %>, <%= age %>, <%= occupation %>
</script>
</head>
<body>
<div id="main" class="container">
<div class="page-header">
<div class="row">
<div id="header" class="span6">
<!--
<h1>Advertisers</h1>
<p>La ricerca ha prodotto {{ count }} risultati.</p>
-->
</div>
<div class="span6">
<div class="input-append" style="text-align:right; margin-top:18px;">
<input id="contact-to-search" class="span5" id="appendedInputButton" type="text">
<button id="src-btn" class="btn" type="button">Search</button>
</div>
</div>
</div>
</div>
<div id="content"></div>
<div id="pagination" class="pagination">
<!--
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">Next</a></li>
</ul>
-->
</div>
</div>
<script src="js/lib/underscore-min.js"></script>
<script src="js/lib/jquery-1.8.3.min.js"></script>
<script src="js/lib/backbone-min.js"></script>
<script src="js/lib/jquery.json-2.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
これは私のmain.jsです
// Models
var User = Backbone.Model.extend({
defaults:{
"name" : "No Name",
"age" : "No Age",
"occupation" : "No occupation"
}
});
//Collections
var UserCollection = Backbone.Collection.extend({
model:User,
url:"json2.json",
parse: function(response){
return response.users;
}
});
// Views
var UserCollectionView = Backbone.View.extend({
tagName:'ul',
initialize:function () {
this.model.bind("reset", this.render, this);
},
render:function () {
_.each(this.model.models, function (user) {
$(this.el).append(new UserView({model:user}).render().el);
}, this);
return this;
}
});
var UserView = Backbone.View.extend({
tagName:"li",
template:_.template($('#tpl-user').html()),
render:function () {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
// Router
var AppRouter = Backbone.Router.extend({
routes:{
"":"list"
},
list:function () {
this.user_collection = new UserCollection();
this.user_collection_view = new UserCollectionView({model:this.user_collection});
this.user_collection.fetch();
$('#content').html(this.user_collection_view.el);
}
});
// Main
var app = new AppRouter();
Backbone.history.start();
イタリアからどうもありがとうございました！