KnockoutJS - observableArray and ko.mapping.fromJS

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

by Avinashullal

HTML

<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-1.2.1.debug.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<button data-bind="click: GetModelsByAjax">Go</button>
<div data-bind="template: {name: 'model-template', foreach: ArrayOfModels}"></div>

<script id="model-template" type="text/html">
    <div data-bind="text: Fullname"></div>
</script>

JavaScript

// Contained Model
function SomeModel(data) {
    var self = this;
    this.Firstname = ko.observable(data.Firstname);
    this.Lastname = ko.observable(data.Lastname);
    this.Fullname = ko.dependentObservable(function() {
        return this.Firstname() + " " + this.Lastname();
    }, self);
}

// View Model
function SomeViewModel() {
    var self = this;

    this.ArrayOfModels = ko.observableArray([]),

    this.GetModelsByAjax = function() {
        $.ajax({
            type: 'POST',
            url: '/echo/json/',
            data: {
                json: JSON.stringify([{
                Firstname: "Bob",
                Lastname: "Smith"},
            {
                Firstname: "Ted",
                Lastname: "Smith"}]),
                delay: 0
            },
            context: this,
            success: function(data) {
                self.SuccessfullyRetrievedModelsFromAjax(data);
            },
            dataType: 'json'
        });
    };

    this.SuccessfullyRetrievedModelsFromAjax = function(models) {
        ko.utils.arrayForEach(models, function(model) {
            self.ArrayOfModels.push(new SomeModel(model)); 
        });
    };
}

ko.applyBindings(new SomeViewModel());