how to restrict the number of tweets returned from twitter api in backbone.js -

i'm trying build simple backbone twitter-based application show overview of recent tweets in user’s timeline of authenticated user’s account, each time run app there 20 tweets returned twitter api , vertical scrolling appeared on browser window dont prefer. how restrict number of tweets appers on page , instead of 20 tweets how load 6 tweets example , make link in bottom of page load rest of tweets. code follows:

my collection:

define(['backbone', 'app/model/tweet'], function(backbone, tweet) {  var com = com || {}; com.apress = com.apress || {}; com.apress.collection = com.apress.collection || {};  com.apress.collection.timeline = backbone.collection.extend({  //the model collection uses model: tweet,  //the server side url connect collection url: 'http://localhost:8080/timeline',  initialize: function(options){     //anything defined on construction goes here }, });  return com.apress.collection.timeline;  }); 

my view

define(['jquery', 'handlebars', 'backbone',  'app/collection/timeline'], function($, handlebars, backbone, timeline) {  var com = com || {}; com.apress = com.apress || {}; com.apress.view = com.apress.view || {};  com.apress.view.timelineview = backbone.view.extend({ el: '#timeline', template: handlebars.compile($("#timeline-template").html()),     timeline: null, events: {     'click .profile': 'showdialog' },  initialize:  function(options){     var self = this;      //create collection view render      self.timeline = new timeline();//new      com.apress.collection.timeline();     //initial render      self.render();      //force fetch fire reset event     self.timeline.fetch({reset:true          });      self.listento(self.timeline, 'reset', self.render);  },  render: function(){     var self = this;      if(self.timeline.models.length > 0){         var output = self.template({tweet: self.timeline.tojson()});          self.$el.append(output);                 }     return self;  }, showdialog: function(options){      var self =this,          $target = $(options.currenttarget),         username = $target.data('user');       /**       * reuse profile view      **/     var profileview = new com.apress.view.profilepopupview ({user:username});  }  }); // export stuff: return com.apress.view.timelineview; }); 

server.js

/** * simple api hosted under localhost:8080/books */ var express = require('express'); var app = express();  var twit = require('twit')  var client = null; function connecttotwitter(){  client = new twit({   consumer_key:         '********' , consumer_secret:      '********' , access_token:         '*******' , access_token_secret:  '*******'  });  }  //get app connect twitter.  connecttotwitter();  /*app.get('/', function(req,res)  {   res.sendfile('index.html');   }  );*/  /**   * account settings user id provided.  **/  app.get('/profile/:id', function(request, response){   response.header('access-control-allow-origin', '*');    client.get('users/show', {screen_name:request.params.id},  function (err, reply) {    if(err){     console.log('error: ' + err);     response.send(404);    }   if(reply){    /// console.log('reply: ' + reply);     response.json(reply);   }   }); });  /**  * returns twitter timeline current user  **/ app.get('/timeline', function (request, response) {  response.header('access-control-allow-origin', '*');   client.get('statuses/home_timeline', { },  function (err, reply) {    if(err){     console.log('error: ' + err);     response.send(404);    }   if(reply){  //   console.log('reply: ' + reply);     response.json(reply);   }   });    });   //additional setup allow cors requests  var allowcrossdomain = function(req, response, next) { response.header('access-control-allow-origin', "http://localhost"); response.header('access-control-allow-methods', 'options,get,put,post,delete'); response.header('access-control-allow-headers', 'content-type');  if ('options' == req.method) {   response.send(200); } else {   next(); } };  app.configure(function() { app.use(allowcrossdomain); //parses json object given in body request app.use(express.bodyparser()); app.use(express.static('../client'));  });  //start server var port = 8080; app.listen( port, function() { console.log( 'express server listening on port %d in %s mode',port,app.settings.env ); }); 

my entry point app

 $(function() {    var timelineview = new com.apress.view.timelineview()   } 

my html

  <div id='timeline' class='timeline-view'>              <h2>my tweets</h2>  </div>   <!-- template timeline -->   <script type="text/x-handlebars-template" id="timeline-template">  <ul class='listview fluid'>     {{#each tweet}}   <li>       <div class='icon'>           <img src='{{user.profile_image_url}}'></img>     </div>         <div class='data'>             <h4>{{user.name}}</h4>             <p>{{format text}}</p>             <p class="timestamp"><i>{{friendlydate}}</i></p>         </div>     </li>     {{/each}} </ul> </script> 

please teach me how should fix it.

thank kindness.

if issue vertical scrolling, in afterrender method, render hide rows after #6. add showmore button once clicked, show hidden rows.

in css

.hidden{display:none} 

in collection: add parse method

parse: function(response){ 

// loop thru tweets , add hidden css class name tweets greater 6

tweet.cssclass = "hidden"  return response; 

}

in html

    {{#each tweet}} <li class="{{cssclass}}"> <div class='icon'>       <img src='{{user.profile_image_url}}'></img> </div>     <div class='data'>         <h4>{{user.name}}</h4>         <p>{{format text}}</p>         <p class="timestamp"><i>{{friendlydate}}</i></p>     </div> </li> {{/each}}