cómo agregar un nuevo elemento usando el plugin de mapeo knockout

Question

Estoy probando una muestra de mapeo y creo que ya casi estoy. No parece poder agregar un nuevo Foo a viewModel.foos. ¿Alguien puede ver lo que he perdido aquí?

var Foo = function (data) { 

    var self = this; 
    self.id = data.id; 
    self.Name = ko.observable(data.Name); 

} 

var dataMappingOptions = { 
    key: function(data) { 
     return data.id;   
    }, 
    create: function (options) { 

     return new Foo(options.data); 
    } 
}; 


var viewModel = { 

    foos: ko.mapping.fromJS([]), 
    loadInitialData: function() { 
     ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos); 
    }, 
    loadUpdatedData: function() { 
     ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos); 
    } 
}; 

viewModel.addFoo = function() { 
    viewModel.foos.push(ko.mapping.fromJS(new Foo())); 
    viewModel.loadUpdatedData(); 
} 


    <ul data-bind="template: {name: 'TopTemplate'}"></ul> 
<script type="text/html" id="TopTemplate"> 
    <li><span>Result</span> 
     <ul data-bind=" template: {name: 'FooTemplate' , foreach: foos} " style="list-style-type:circle;margin-left:15px"> 
     </ul> 
    </li> 
    <button data-bind='click: addFoo'>Add Foo</button> 
</script>  
<script type="text/html" id="FooTemplate">  
    <li><span data-bind='text: Name'></span> 

    </li> 

</script> 

Answer 1

Usted puede simplemente empujar un nuevo Foo a su observable Array directamente.

Aquí hay una muestra de cargar algunos datos iniciales y luego cargar algunos datos actualizados junto con un botón para agregar nuevos elementos en el lado del cliente. http://jsfiddle.net/rniemeyer/wRwc4/

var viewModel = { 
    foos: ko.mapping.fromJS([]), 
    loadInitialData: function() { 
     ko.mapping.fromJS(initialData, dataMappingOptions, viewModel.foos); 
    }, 
    loadUpdatedData: function() { 
     ko.mapping.fromJS(updatedData, viewModel.foos); 
    } 
}; 

viewModel.addFoo = function() { 
    viewModel.foos.push(new Foo({ id: 0, Name: "New" })); 
}; 

Answer 2

Desde el cartel original está aplicando observables dentro de los miembros de la clase Foo no hay necesidad de aplicar ko.mapping.fromJS a ella. Sin embargo, he encontrado que cuando tienes un objeto json "en bruto" (sin asignaciones) que debes agregar a una matriz observable (es decir, has aplicado ko.mapping.fromJS()), realmente necesitas realizar ko.mapping.fromJS por ejemplo

myArray.push(ko.mapping.fromJS(myNewRawJsonItem)); 

de lo contrario sus fijaciones plantilla (si tiene alguno) se quejan de que "xxxx TypeError no es una función".