嵌套數組集合observable不工作在淘汰賽

Question

我有公司名單，當點擊每個公司需要顯示該公司的銷售人員。

我試過這個。下面是腳本，整個你可以找到http://jsfiddle.net/habdulha/gkqeD/29/

初始公司上市，但點擊該公司的銷售人員都沒有加載

<!-- language: lang-js --> 

var rootViewModel = function(companies) { 
this.companiesModel = ko.observableArray(companies); 
} 

var companyModel = function(salesPersonModel) { 
CompanyId = ko.observable(); 
Name = ko.observable(); 
SalesPersonList = ko.observableArray(salesPersonModel); 
LoadSalesPerson = function() { 

    var self = this; 
    var postData = { 
     companyId: this.CompanyId() 
    } 
    /// ajax to get the emp name based on company id 
    var data = $.ajax({ 
     type: 'GET', 
     url: '/echo/json/', 
     data: postData, 
     success: function(result) { 
      /// result is based on companyid 
      var ajaxReply = { 
       "empName": "John", 
       "empName": "John 1" 
      }; 


      self.SalesPersonList = ko.observableArray(ko.mapping.fromJS(ajaxReply)()); 


     }, 
     error: function(xhr, ajaxOptions, thrownError) { 
      alert(xhr.status); 
      alert(thrownError); 
     } 
    }); 
    } 
    } 

var salesModel = function() { 
    empName = ko.observable(); 
} 


    var myCompanyModelArray = new Array(); 
    var mySalesModelArray = new Array(); 
    mySalesModelArray[0] = new salesModel(); 
    myCompanyModelArray[0] = new companyModel(mySalesModelArray); 
    var mainViewModel = new rootViewModel(myCompanyModelArray); 
    ko.applyBindings(mainViewModel); 

    $(document).ready(function() { 
     var data = $.ajax({ 
     type: 'GET', 
     url: '/echo/json/', 
     //// get all the companies 
     success: function(data) { 
     var ajaxReply = { 
      { 
       "CompanyId ": "1", 
       "Name ": "Comp 1" 
      }, { 
       "CompanyId ": "2", 
       "Name ": "Comp 2" 
      } 
     }; 
     residencyViewModel.yearGroupModel(ko.mapping.fromJS(ajaxReply)()); 

    }, 
    error: function(xhr, ajaxOptions, thrownError) { 
     alert(xhr.status); 
     alert(thrownError); 
    } 
    }); 

    }); 

Answer 1

的問題是在這行代碼：

self.SalesPersonList = ko.observableArray(ko.mapping.fromJS(ajaxReply)()); 

SalesPersonList是一個可觀察數組，因此當它綁定到您的UI時，Konckout將觀察數組的變化。在上面的代碼中，你只需用新實例替換你的數組。爲了使這項工作需要更換綁定到你的用戶界面，而不是替換陣列本身的數組的內容...

self.SalesPersonList.RemoveAll(); 
for(var item in ko.mapping.fromJS(ajaxReply)()) { 
    self.SalesPersonList.push(item); 
} 

Answer 2

我有同樣的問題，但@可啉的回答並沒有爲我工作，但想法是正確的...

在我的情況下，我收到項目列表作爲JSON並將它們添加到映射後的observable數組。

$.getJSON("/Path/To/Json/Service", function (r) { 

    self.SalesPersonList.removeAll(); 

    // loop through each item returned 
    $.each(r, function (i, v) { 
     // add a mapped item to the array 
     self.SalesPersonList.push(ko.mapping.fromJS(v)); 
    }); 

});