Las colecciones de matriz anidadas observables no funcionan en Knockout

Question

Tengo una lista de empresas, al hacer clic en cada empresa, debe mostrar los vendedores de esa compañía.

Intenté eliminar esto. A continuación se muestra el script y el conjunto que puede encontrar en http://jsfiddle.net/habdulha/gkqed/29/

Se enumera la compañía inicial, pero haciendo clic en la compañía en los que los vendedores no están cargados.

<!-- 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

El problema está en esta línea de código:

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

SalesPersonList es una matriz observable, por lo que cuando está vinculado a su interfaz de usuario, Konckout observará la matriz de cambios. En el código anterior, simplemente está reemplazando su matriz con una nueva instancia. Para hacer este trabajo, debe reemplazar el contenido de la matriz vinculado a su interfaz de usuario en lugar de reemplazar la matriz en sí ...

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

Answer 2

Tuve el mismo problema, pero la respuesta de @Coline no funcionó para mí, pero la idea era correcta ...

En mi caso, estoy recibiendo la lista de elementos como JSON y los agrego a la matriz observable después de la asignación.

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

});