come aggiungere un nuovo elemento utilizzando il plug-in di mappatura knockout

Question

Sto provando un esempio di mappatura a eliminazione diretta e penso di essere quasi arrivato. Non riesco ad aggiungere un nuovo Foo a viewModel.foos - qualcuno può vedere cosa ho perso qui?

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

È possibile inserire direttamente un nuovo Foo nel proprio osservableArray.

Ecco un esempio di caricamento di alcuni dati iniziali e quindi caricamento di alcuni dati aggiornati insieme a un pulsante per aggiungere nuovi elementi sul lato client. 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

Dal momento che il manifesto originale sta applicando osservabili all'interno dei membri della classe Foo non c'è bisogno di applicare ko.mapping.fromJS ad esso. Tuttavia ho scoperto che quando si ha un oggetto json 'raw' (senza mapping) che è necessario aggiungere a un array osservabile (cioè si è precedentemente applicato ko.mapping.fromJS()), è effettivamente necessario eseguire ko.mapping.fromJS es

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

In caso contrario, le associazioni di template (se ne avete) si lamentano che "TypeError xxxx non è una funzione".