title: Knockout.js Update ViewModel on button click
body: <p>Well, that's not the best situation description... Anyway, I'm trying to update my ViewModel but it's not working. By default I'm getting data from controller function and by button click - from another function in same contoller, but ViewModel contain only data received after first ViewModel initialization.</p>
  
  <pre><code>&lt;script&gt;
       function viewModel () {
          var self = this;
          self.currentPage = ko.observable();
          self.pageSize = ko.observable(10);
          self.currentPageIndex = ko.observable(0);
          self.salesdata = ko.observableArray();
          self.newdata = ko.observable();
          self.currentPage = ko.computed(function () {
              var pagesize = parseInt(self.pageSize(), 10),
              startIndex = pagesize * self.currentPageIndex(),
              endIndex = startIndex + pagesize;
              return self.salesdata.slice(startIndex, endIndex);
          });
          self.nextPage = function () {
              if (((self.currentPageIndex() + 1) * self.pageSize()) &lt; self.salesdata().length) {
                  self.currentPageIndex(self.currentPageIndex() + 1);
              }
              else {
                  self.currentPageIndex(0);
              }
          }
          self.previousPage = function () {
              if (self.currentPageIndex() &gt; 0) {
                  self.currentPageIndex(self.currentPageIndex() - 1);
              }
              else {
                  self.currentPageIndex((Math.ceil(self.salesdata().length / self.pageSize())) - 1);
              }
          }
          //Here I'm trying to update ViewModel
          self.request = function (uri) {
              $.ajax({
                  url: uri,
                  contentType: 'application/json',
                  data: [],
                  type: 'GET',
                  cache: false,
              success: function (data) {
                  ko.mapping.fromJS(data.$values, {}, self.salesdata);
              }
              });
          }
      }
      $(document).ready(function () {
          $.ajax({
              url: "/api/sales",
              type: "GET",
              cache: false,
          }).done(function (data) {
              var vm = new viewModel();
              vm.salesdata(data.$values);
              ko.applyBindings(vm);
          }).error(function (xhr, status, error) {
              var err = eval("(" + xhr.responseText + ")");
              alert(err.Message);
          });
          //Here i'm calling for ViewModel update
          $(".btn-default").click(function () {
              days = $(this).val();
              var uri = "/api/sales?days=" + days;     
              new viewModel().request(uri);
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>UPDATE.</strong>
  I chaged block of code where I'm getting new data to be as follow:</p>
  
  <pre><code>self.request = function (uri) {
                  $.getJSON(uri, function (data) {
                      ko.mapping.fromJS(data.$values, {}, viewModel);
                  });
              }
  </code></pre>
  
  <p>Unfortunately this is not working as well. Here is no any JS errors, controller return proper portion of updated data.</p>