淘汰賽親子延遲加載與映射插件和KoGrid

設置： 在我的視圖模型，我從JSON建項目的可觀測陣列（它只有姓名和身份證）所謂的「項目」。我還爲所選項目（它具有項目的全部細節）提供了一個名爲「selecteditem」的觀察值。當您點擊「項目」列表中的一個項目時，它應該填充「selecteditem」，該項目將通過另一個JSON回覆填充「itemdetails」，並允許您編輯它們並保存更改。淘汰賽親子延遲加載與映射插件和KoGrid

進展： 電網的點擊工作正確的，它得到正確的廠商ID和傳遞沿到查詢字符串/ API /供應商/ 14，如果我點擊供應商14

問題： 如何使用第二個Ajax調用來更新我的viewmodel的selecteditem部分（點擊其中一個項目時觸發）。

KoGrid HTML：

   <div class="gridContainer"> 
       <div data-bind="koGrid: { 
        data: items, 
        autogenerateColumns: false, 
        isMultiSelect: false, 
        displaySelectionCheckbox: false, 
        selectedItem: selecteditem, 
        columnDefs: [ 
         { field: 'VendorID', displayName: 'Vendor ID' }, 
         { field: 'Name', displayName: 'Vendor Name' } 
        ]}"> 
       </div> 
      </div>

子html（現在只是幾個字段用於測試）：

  <div data-bind="foreach: itemdetails"> 
       <span data-bind="text: BusinessContactName"></span><br /> 
       <span data-bind="text: BusinessContactTitle"></span> 
      </div>

的Javascript：

 <script type="text/javascript"> 
     $(document).ready(function() { 
      var API_URL = "/api/vendor/"; 

      $.ajax({ 
       type: 'GET', 
       url: API_URL, 
       dataType: 'json', 
       success: function (data) { 
        /* View Model */ 
        window.viewModel = { 
         items: ko.mapping.fromJS(data), 
         selecteditem: ko.observable(), 
         itemdetails: ko.observable() 
        }; 

        /* Get Selected Item */ 
        window.viewModel.selecteditem.subscribe(function (newValue) { 
         if (newValue) { 
          var param = newValue.VendorID(); 
          $.ajax({ 
           type: 'GET', 
           url: API_URL + param, 
           dataType: 'json', 
           success: function (data2) { 
            //What to do here?? 
            window.viewModel.itemdetails = ko.mapping.fromJS(data2); 
            //This shows the correct value 
            alert(window.viewModel.itemdetails.BusinessContactName()); 
           } 
          }); 
         } 
        }); 

        ko.applyBindings(viewModel); 
       } 
      }); 
     }); 
    </script>

來源

2012-11-19 ScottRFrost