title: Getting data after binding data in Knockout
body: <p>I have single grid page and try to bind data using Knockout but I guess there is a logical problem (because of me). Data binding starts before getting data from json. </p>
  
  <p>Here javascript;</p>
  
  <pre><code>$(function () {
  
  
  
  my.PriceListViewModel = (function () {
      var 
          data = ko.observableArray([]),
          totalCount = ko.observable(),
          currentPage = ko.observable(1),
          page = ko.observable(my.PageModel),
          goTo = function (d) {
              $.getJSON("/prices/GetByFilterViaJSON?limit=3&amp;page=" + d, function (data) {
                  Data(data.Data);
                  CurrentPage(d);
              });
          },
          loadData = function () {
              $.getJSON("/prices/GetByFilterViaJSON?limit=3", function (list) {
                  $.each(list, function (key, val) {
                      data.push(val);
                  });
  
                  my.PageModel.LoadData(data);
                  Page = my.PageModel;
              });
          };
      return {
          Data: data,
          TotalCount: totalCount,
          CurrentPage: currentPage,
          Page: page,
          GoTo: goTo,
          LoadData: loadData
      };
  })();
  
  my.PageModel = (function () {
      loadData = function (data) {
          ko.mapping.fromJS(data.Page, {}, this);
      };
  
      return {
          LoadData: loadData
      };
  
  })();
  
  my.PriceListViewModel.LoadData();
  debugger;
  ko.applyBindings(my.PriceListViewModel);
  });
  </code></pre>
  
  <p>and html;</p>
  
  <pre><code>&lt;div class="section table_section"&gt;
  &lt;div class="section_inner" id="divTestKoRemoteGrid" &gt;
      &lt;div class="title_wrapper"&gt;
          &lt;h2 data-bind="text: TotalCount"&gt;
              Prices&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="section_content"&gt;
          &lt;div id="product_list"&gt;
              &lt;!--[if !IE]&gt;start table_wrapper&lt;![endif]--&gt;
              &lt;div class="table_wrapper"&gt;
                  &lt;div class="table_wrapper_inner"&gt;
                      &lt;table cellpadding="0" cellspacing="0" width="100%"&gt;
                          &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;
                                      No.
                                  &lt;/th&gt;
                                  &lt;th&gt;
                                      Tier
                                  &lt;/th&gt;
                                  &lt;th&gt;
                                  &lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;!-- ko foreach: Data --&gt;
                              &lt;tr data-bind="css: { second: $index() % 2 }"&gt;
                                  &lt;td data-bind="text: Id" style="width: 26px;"&gt;
                                  &lt;/td&gt;
                                  &lt;td data-bind="text: Tier" style="width: 35px;"&gt;
                                  &lt;/td&gt;
                                  &lt;td style="width: 120px;"&gt;
                                      &lt;div class="actions_menu"&gt;
                                          &lt;ul&gt;
                                              &lt;li&gt;&lt;a class="edit" href=""&gt;edit&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a class="delete" href=""&gt;deny&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;!-- /ko --&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!--[if !IE]&gt;end table_wrapper&lt;![endif]--&gt;
          &lt;/div&gt;
          &lt;!--[if !IE]&gt;start pagination&lt;![endif]--&gt;
          &lt;div class="pagination"&gt;
              &lt;span class="page_no" data-bind="text: CurrentPage()"&gt;&lt;/span&gt;
              &lt;ul class="pag_list" data-bind="foreach: ko.utils.range(1, Page.TotalPage)"&gt;                   
                  &lt;li&gt;&lt;a href=""  data-bind="click: $root.GoTo, css:{current_page: $data==$root.CurrentPage()}"&gt;&lt;span&gt;&lt;span data-bind="text: $data"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!--[if !IE]&gt;end pagination&lt;![endif]--&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>How can I get data before binding starts?</p>