How to tie knockout to backend using mapping plugin?

Question

I am new to knockoutjs, and can see its benefits/potential. I have what I think is a pretty simple question.

How can I populate my observable array from the server, so to speak. I have got what I want working with 2 hard coded array elements, but am not sure how to tie it to a backend.

Here is a jsfiddle http://jsfiddle.net/P9LLL/

So at least in my head, although I am open to suggestions if I am going about it wrong. How do I replace these lines with something that could be loaded from a db.

new SeatReservation("Bandaid",  10),
new SeatReservation("Bandages", 12)

I have been suggested by a friend to look at the knockout plugin mapping http://knockoutjs.com/documentation/plugins-mapping.html But not sure how to incorporate it into my example.

For what it is worth I am using PHP & MySQL also.

Many thanks for any suggestions.

Answer 1

Yes, your friend is right, mapping.fromJS is good to convert raw JSON into objects with observables. Just in case, remember that observables are necessary if you need to update the data on client side. If you only want to show data then the observables aren't necessary.

Simple View Model :

// raw data from DB
var raw = [{
    itemName: "Item1",
    defaultQuantity: 10
}, {
    itemName: "Item2",
    defaultQuantity: 12
}];


function SeatReservation(item) {
    var self = this;
    // converts each property (of item) into observable and set it to self.
    ko.mapping.fromJS(item, {}, self);

    // fromJS creates these observables for you:
    // self.itemName = ko.observable(item.itemName)
    // self.defaultQuantity= ko.observable(item.defaultQuantity)

}

function ReservationsViewModel() {
    var self = this;

    // Converts each item into a SeatReservation (Like a Select in MySql)
    self.kits = ko.utils.arrayMap(raw, function (item) {
        return new SeatReservation(item);
    });
}

ko.applyBindings(new ReservationsViewModel());

See working fiddle

I hope it helps.

Answer 2

You can do it like this (Fiddles does not work in chrome)

http://jsfiddle.net/P9LLL/1/

function ReservationsViewModel(data) {
    this.kits = ko.observableArray();

    ko.mapping.fromJS(data, {}, this);
}

var jsonDataFromBackend = { kits: [{ itemName: "Item1", defaultQuantity: 10 },{ itemName: "Item2", defaultQuantity: 12 } ] };
ko.applyBindings(new ReservationsViewModel(jsonDataFromBackend));

This will create a dynamic type for each item in kits. You cant add computed and other functions to these in a nice way, instead do

http://jsfiddle.net/P9LLL/2/

function SeatReservation(data) {    
    ko.mapping.fromJS(data, {}, this);
    this.total = ko.computed(function() {
       return this.price() * this.defaultQuantity();
    }, this);
}


function ReservationsViewModel(data) {
    this.kits = ko.observableArray();
    var mapping = {
        kits: {
            create: function(options) {
                return new SeatReservation(options.data);
            }
        }
    };

    ko.mapping.fromJS(data, mapping, this);
}

var jsonDataFromBackend = { kits: [{ itemName: "Item1", defaultQuantity: 10, price: 2 },{ itemName: "Item2", defaultQuantity: 12, price: 5 } ] };
ko.applyBindings(new ReservationsViewModel(jsonDataFromBackend));