KnockoutJS - observableArray and ko.mapping.fromJS

http://stackoverflow.com/questions/6637579/knockoutjs-observablearray-and-ko-mapping-fromjs

by kougiland

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.1.0.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<button data-bind="click: GetPersonByAjax">Load</button><br />

<div data-bind="if: ajaxLoaded">
    Firstname <input data-bind="value: person.Firstname" /><br />
    Lastname <input data-bind="value: person.Lastname" /><br />
    Gender <input data-bind="value: person.Gender" />
</div>

<pre data-bind="text: JSON.stringify(ko.mapping.toJS($root), null, 2)"></pre>

JavaScript

// View Model
function SomeViewModel() {
    var self = this;
    self.ajaxLoaded = ko.observable(false);
    self.person= ko.mapping.fromJS({}); // Empty Person (Does Not Work)
    //self.person= ko.mapping.fromJS({"Firstname": "", "Lastname": "", "Gender": ""}); // Hardcoded person (Works)

    self.GetPersonByAjax= function() {
        $.ajax({
            type: 'POST',
            async: false,
            url: '/echo/json/',
            data: {
                json: JSON.stringify({
                        Firstname: 'Bob',
                        Lastname: 'Smith',
                        Gender: 'M'
                    }),
                delay: 0
                },            
            context: this,
            success: function(data) {                
                ko.mapping.fromJS(data, self.person);  
                self.ajaxLoaded(true);                
            },
            dataType: 'json'   
        });
    };

}

ko.applyBindings(new SomeViewModel());