KO mapping

by anup1986

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js "></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="span6 top">
    <div class="row-fluid">
        <div class="span6"><b>Artikel</b>

        </div>
        <div class="span6" data-bind="text: ArtNr">ArtNr</div>
    </div>
    <div class="row-fluid">
        <div class="span6"><b>Beskrivning</b>

        </div>
        <div class="span6" data-bind="text: ArtBeskr">ArtBeskr</div>
    </div>
    <div class="row-fluid">
        <div class="span6"><b>ArtNr och ArtBeskr</b>

        </div>
        <div class="span6" data-bind="text: ArtNrArtBeskr">ArtNrArtBeskr</div>
    </div>
    <div class="row-fluid">
        <div class="span6"><b>Hyllsaldo</b>

        </div>
        <div class="span6" data-bind="text: Antal">Antal</div>
    </div>
    <div class="row-fluid">
        <div class="span6">
            <button class="btn btn-success" type="button" data-bind="click: resetModel">Reset</button>
            <button class="btn btn-primary" type="button" data-bind="click: updateModel">Update from JSON</button>
        </div>
    </div>

CSS

.btn {
    margin: 5px;
}
.top {
    margin-top: 10px;
}

JavaScript

var item = {
    ArtNr: "2001",
    ArtBeskr: "Trehjuling",
    Antal: 40
}

var newItem = {}

// Simulerar ett ajax-anrop, den data som kommer härifrån vill jag binda/mappa till min viewModel DIREKT vid laddning
// av sidan. Alltså utan att behöva trycka på nån knapp.
// Gärna i någon funktion som jag kan anropa sedan för att uppdatera modellen när jag så behöver.
function viewModel() {
    var self = this;
    
    getSomeData(function() {
        self.updateModel(this);
    });
    
    self.ArtNrArtBeskr = ko.computed(function () {
        return self.ArtNr + " - " + self.ArtBeskr;
    });
    
    self.updateModel = function (data) {
        ko.mapping.fromJSON(data, viewModel);
    };
    
    self.resetModel = function () {
        ko.mapping.fromJS(newItem, viewModel);
    };
}

function getSomeData(callback) {
    new Request.JSON({
        url: '/echo/json/',
        data: {
            json: JSON.encode({
                ArtNr: "1001",
                ArtBeskr: "Cykelpump",
                Antal: 25
            })
        },
        onSuccess: function (response) {
            callback.call(response);
        }
    }).send();
}

ko.applyBindings(new viewModel());