如何在my backbone.js练习中插入分页_Backbone.js_Backbone Views_Backbone.js Collections

如何在my backbone.js练习中插入分页

backbone.js

如何在my backbone.js练习中插入分页,backbone.js,backbone-views,backbone.js-collections,Backbone.js,Backbone Views,Backbone.js Collections,我试图学习backbone.js，在本练习中，我有一个视图显示集合中的元素。此集合从导出json文件的后端获取数据，如下所示： { "users": [ { "name": "Jeffrey Way", "age": 27 }, { "name": "John Doe", "age": 50, "occupation":

我试图学习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吗？如果你知道为我的目的实现分页的另一种方法，你能给我解释一下吗

这是我的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>

非常感谢来自意大利的您

看看这个插件：

// 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();