Вложенные коллекции массивов наблюдаемые не работают в нокауте

Question

У меня есть список компаний, при нажатии на каждую компанию нужно показывать продавцов этой компании.

Я пробовал нокаут для этого. ниже сценарий и все вы можете найти в http://jsfiddle.net/habdulha/gkqeD/29/

Initial компания зарегистрирована, но нажав на компании в продавцы не загружены в

<!-- 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 - наблюдаемый массив, поэтому, когда он привязан к вашему пользовательскому интерфейсу, Konckout будет наблюдать массив изменений. В приведенном выше коде вы просто заменяете свой массив новым экземпляром. Для того, чтобы сделать эту работу вам нужно заменить содержимое массива, связанного с вашим UI, а не заменяя сам массив ...

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

Answer 2

У меня была такая же проблема, но @ ответ Coline не работает для меня, кроме идея была права ...

В моем случае я получаю список элементов как JSON и добавляю их в наблюдаемый массив после сопоставления.

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

});