title: How to handle pagination with Knockout
body: <p>I have a div that is setup to bind to a <code>observeableArray</code> ,but I only want to show at most 50 items from that <code>observeableArray</code> at any given time. I want to handle this with pagination with a previous and next button along with indices on the page to allow users to cycle through pages of items from the collection.<br/> I know I could probably do this with a <code>computedObservable</code> and a custom data binding but I'm not sure how to do it (I'm still a Knockout neophyte).<br/> Can anyone point me in the right direction?</p>
  
  <p>Here is my code (the JS is in TypeScript):</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span12"&gt;
              &lt;%=
              if params[:q]
                render 'active_search.html.erb'
              else
                render 'passive_search.html.erb'
              end
              %&gt;
              &lt;%= form_tag("/search", method: "get", :class =&gt; "form-search form-inline") do %&gt;
              &lt;%= label_tag(:q, "Search for:") %&gt;
              &lt;%= text_field_tag(:q, nil, class:"input-medium search-query") %&gt;
              &lt;%= submit_tag("Search", :class=&gt;"btn") %&gt;
              &lt;% end %&gt;
  
              &lt;div class="media" data-bind="foreach: tweetsArray"&gt;
                  &lt;%= image_tag('twitter-icon.svg', :class=&gt;"tweet_img", :style=&gt;"display:inline;") %&gt;
                  &lt;div class="media-body" style="display:inline;"&gt;
                      &lt;h4 class="media-heading" data-bind="text: user.screen_name" style="display:inline;"&gt;&lt;/h4&gt;
                      &lt;span data-bind="text:text" style="display:inline;"&gt;&lt;/span&gt; &lt;br /&gt;
                      &lt;span data-bind="text:'Created at '+created_at"&gt;&lt;/span&gt; &lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="pagination pagination-centered"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Prev&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;1&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Next&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      var viewModel = new twitterResearch.TweetViewModel();
      ko.applyBindings(viewModel);
  
      //TODO: notes to self, use custom binding for pagination along with a computed observable to determine where at in the list you are
  
      //document.onReady callback function
      $(function() {
          $.getJSON('twitter', {}, function(data) {
              viewModel.pushTweet(data);
              console.log(data.user);
          });
      });
  &lt;/script&gt;
  
  declare var $: any;
  declare var ko: any;
  
  module twitterResearch {
      class Tweet {
          text: string;
          created_at: string;
          coordinates: string;
          user: string;
          entities: string;
          id: number;
          id_str: string;
  
          constructor(_text: string, _created_at: string, _coordinates: any, _user: any,
                      _entities: any, _id_str: string, _id: number){
  
              this.text = _text;
              this.created_at = _created_at;
              this.coordinates = _coordinates;
              this.user = _user;
              this.entities = _entities;
              this.id_str = _id_str;
              this.id = _id;
          }
      }
  
      export class TweetViewModel{
  
          tweetsArray: any;
          constructor()
          {
              this.tweetsArray = ko.observableArray([]);
          }
  
          //tweet is going to be the JSON tweet we return
          //from the server
          pushTweet(tweet)
          {
              var _tweet = new Tweet(tweet.text, tweet.created_at, tweet.coordinates,
                                      tweet.user, tweet.entities, tweet.id_str, tweet.id);
              this.tweetsArray.push(_tweet);
              this.tweetsArray.valueHasMutated();
          }
      }
  }
  </code></pre>