title: How to properly create pagination with knockout.js component?
body: <p>I'm working on building a component for a current and future projects that handles pagination on a knockout component level.  I've based the idea on the accepted answer from <a href="https://stackoverflow.com/a/17670390/7314155">here</a>. Also reference the Knockout component page <a href="http://knockoutjs.com/documentation/component-binding.html" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Here is my component thus far. I am having trouble getting Any of the data to actually display, let alone with a dynamic table heading.</p>
  
  <pre><code>ko.components.register("jPage", {
  viewModel: function (params) {
      var self = this;
      self.Items = params.Items;
      self.Keys = Object.keys(self.Items);
      self.PerPage = params.PerPage;
      self.Page = 1;
      self.PagesTotal = Math.ceil(self.Items.length / self.PerPage);
  
      self.ItemsVisible = ko.computed(function () {
          first = (self.Page * self.PerPage) - self.PerPage;
          return self.Items.slice(first, first + self.PerPage);
      })
  
      self.ChangePage = function (_page) {
          if (_page &lt; 1 || _page &gt; self.PagesTotal) return;
          this.Page(_page);
      }.bind(this);
  
  
  },
  template: 
      '&lt;div data-bind="foreach: ItemsVisible"&gt; \
          Display Table headers and data here &lt;br&gt;\
          &lt;span data-bind="text: $data[0]"&gt; &lt;/span&gt;\
      &lt;/div&gt;\
      &lt;nav aria-label="Page navigation"&gt;\
      &lt;ul class="pagination"&gt;\
          &lt;li data-bind="css:{disabled: Page &lt;= 1} "&gt;\
              &lt;a aria-label="Previous" data-bind="click: ChangePage( Page - 1 )"&gt;\
                  &lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt;\
              &lt;/a&gt;\
          &lt;/li&gt;\
          &lt;li&gt;&lt;a data-bind="text: Page -2, click: ChangePage( Page - 2 ), visible: Page &gt; 2 "&gt; &lt;/a&gt;&lt;/li&gt;\
          &lt;li&gt;&lt;a data-bind="text: Page -1, click: ChangePage( Page - 1 ), visible: Page &gt; 1 "&gt; &lt;/a&gt;&lt;/li&gt;\
          &lt;li class="active"&gt;&lt;a data-bind="text: Page"&gt; &lt;/a&gt;&lt;/li&gt;\
          &lt;li&gt;&lt;a data-bind="text: Page +1, click: ChangePage( Page + 1 ), visible: (PagesTotal &gt; Page +0) "&gt;&lt;/a&gt;&lt;/li&gt;\
          &lt;li&gt;&lt;a data-bind="text: Page +2, click: ChangePage( Page + 2 ), visible: (PagesTotal &gt; Page +1)"&gt;&lt;/a&gt;&lt;/li&gt;\
          &lt;li data-bind="css: {disabled: (PagesTotal &lt; Page )}"&gt;\
              &lt;a aria-label="Next" data-bind="click: ChangePage( Page + 1 )"&gt;\
                  &lt;span aria-hidden="true"&gt;&amp;raquo;&lt;/span&gt;\
              &lt;/a&gt;\
          &lt;/li&gt;\
      &lt;/ul&gt;\
  &lt;/nav&gt;\
  '
  })
  </code></pre>
  
  <p>This is how the component would be called:</p>
  
  <pre><code>&lt;div data-bind="component: { name: 'jPage', params: { Items: CustomerList(), PerPage: 25} }"&gt;
  </code></pre>
  
  <p><code>CustomerList</code> would look like: </p>
  
  <pre><code>[
    {FirstName: "John", Email: "John@example.com"},
    {FirstName: "Steve", Email: "Steve@example.com"},
    {FirstName: "Jim", Email: "Jim@example.com"}
  ]
  </code></pre>
  
  <p>What variables or context am I missing to access <code>Items</code> keys/values?</p>
  
  <p>Extra Notes. 
  I do not have any required form of data as I can manipulate it without consequence.</p>