2

我正在尝试学习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();

非常感谢你来自意大利！！

4

0 回答 0