녹아웃에서 데이터를 바인딩 한 후 데이터 가져 오기

Question

단일 격자 페이지가 있고 녹아웃을 사용하여 데이터를 바인딩하려고했지만 논리적 인 문제가 있다고 생각합니다. json에서 데이터를 가져 오기 전에 데이터 바인딩이 시작됩니다.

여기 javascript;

$(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&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); 
}); 

및 html;

<div class="section table_section"> 
<div class="section_inner" id="divTestKoRemoteGrid" > 
    <div class="title_wrapper"> 
     <h2 data-bind="text: TotalCount"> 
      Prices</h2> 
    </div> 
    <div class="section_content"> 
     <div id="product_list"> 
      <!--[if !IE]>start table_wrapper<![endif]--> 
      <div class="table_wrapper"> 
       <div class="table_wrapper_inner"> 
        <table cellpadding="0" cellspacing="0" width="100%"> 
         <tbody> 
          <tr> 
           <th> 
            No. 
           </th> 
           <th> 
            Tier 
           </th> 
           <th> 
           </th> 
          </tr> 
          <!-- ko foreach: Data --> 
          <tr data-bind="css: { second: $index() % 2 }"> 
           <td data-bind="text: Id" style="width: 26px;"> 
           </td> 
           <td data-bind="text: Tier" style="width: 35px;"> 
           </td> 
           <td style="width: 120px;"> 
            <div class="actions_menu"> 
             <ul> 
              <li><a class="edit" href="">edit</a></li> 
              <li><a class="delete" href="">deny</a></li> 
             </ul> 
            </div> 
           </td> 
          </tr> 
          <!-- /ko --> 
         </tbody> 
        </table> 
       </div> 
      </div> 
      <!--[if !IE]>end table_wrapper<![endif]--> 
     </div> 
     <!--[if !IE]>start pagination<![endif]--> 
     <div class="pagination"> 
      <span class="page_no" data-bind="text: CurrentPage()"></span> 
      <ul class="pag_list" data-bind="foreach: ko.utils.range(1, Page.TotalPage)">     
       <li><a href="" data-bind="click: $root.GoTo, css:{current_page: $data==$root.CurrentPage()}"><span><span data-bind="text: $data"></span></span></a> 
       </li> 
      </ul> 
     </div> 
     <!--[if !IE]>end pagination<![endif]--> 
    </div> 
</div> 

어떻게 시작을 바인딩하기 전에 데이터를받을 수 있나요?

Answer 1

해결책을 찾았습니다.

나는 비동기 인 $ .getJson 메소드를 사용하여 데이터가로드 된 viewmodel 이후에오고있었습니다.

$ .ajax.async = false로 $ .getJson 메서드를 변경했지만 모든 것이 정상입니다.

my.PriceListViewModel = (function() { 
    var 
     data = ko.observableArray([]), 
     totalCount = ko.observable(), 
     page = ko.observable(), 
     goTo = function (d) { 
      $.getJSON("/prices/GetByFilterViaJSON?limit=6&page=" + d, function (list) { 
       data(list.Data); 
       page(list.Page); 
      }); 
     }, 
     loadData = function() { 
      $.ajax({ 
       type: 'GET', 
       url: '/prices/GetByFilterViaJSON', 
       dataType: 'json', 
       success: function (list) { 
        data(list.Data); 
        page(list.Page); 
        totalCount(list.TotalCount); 
       }, 
       data: { limit: 6 }, 
       async: false 
      }); 
     }; 
    return { 
     Data: data, 
     TotalCount: totalCount, 
     Page: page, 
     GoTo: goTo, 
     LoadData: loadData 
    }; 
})(); 
my.PriceListViewModel.LoadData(); 
ko.applyBindings(my.PriceListViewModel); 

Answer 2

ko.applyBindings (my.PriceListViewModel);을 호출 할 수 있습니다. 초기 데이터가 검색된 후에 만

Answer 3

문서 준비 기능에서 호출 적용 바인딩.