binding array of data using knockout mapping plugin

Question

I have the following JSON data:

var donutData = [ {
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"topping":
    [
        { "id": "5001", "type": "None", "price": 45.00 },
        { "id": "5002", "type": "Glazed", "price": 45.00 },
        { "id": "5005", "type": "Sugar", "price": 45.00 },
        { "id": "5007", "type": "Powdered Sugar", "price": 45.00 },
        { "id": "5006", "type": "Chocolate with Sprinkles", "price": 45.00 },
        { "id": "5003", "type": "Chocolate", "price": 45.00 },
        { "id": "5004", "type": "Maple", "price": 45.00 }
    ]
   },
    { "id": "0002",
        "type": "donut",
        "name": "Lava Cake",
        "ppu": 0.65,
        "topping":
    [
        { "id": "5001", "type": "None", "price": 45.00 },
        { "id": "5002", "type": "Glazed", "price": 45.00 },
        { "id": "5005", "type": "Sugar", "price": 45.00 },
        { "id": "5007", "type": "Powdered Sugar", "price": 45.00 },
        { "id": "5006", "type": "Chocolate with Sprinkles", "price": 45.00                           },
        { "id": "5003", "type": "Chocolate", "price": 45.00 },
        { "id": "5004", "type": "Maple", "price": 45.00 }
    ]
    }

]

I could easily data-bind this to my HTML page using the following:

var DonutViewModel = function(){
donuts = ko.observableArray();

}

$(document).ready(function () {
    ko.applyBindings(DonutViewModel(donutData));
});

And here is my HTML:

 <tbody data-bind="foreach:donuts">
<tr>
    <td data-bind="text:id"></td>
    <td data-bind="text:type"></td>
    <td data-bind="text:name"></td>
    <td data-bind="text:ppu"></td>
    <td>
        <table>
            <tbody data-bind="foreach:topping">
                <tr>
                    <td data-bind="text:type"></td>
                </tr>
            </tbody>
        </table>
    </td>
     <td>
        <table>
            <tbody data-bind="foreach:topping">
                <tr>
                    <td data-bind="text:price"></td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>
</tbody>

Now I want to accomplish the same using knockout mapping plugin. i tried the following:

$(document).ready(function () {
var viewModel = ko.mapping.fromJS(donutData);
ko.applyBindings(viewModel());
//ko.applyBindings(DonutViewModel(donutData));
});

this gives me an error - obviously, because I've used data-bind="foreach:donuts" which is no longer there in my viewmodel. So how can I alter my UI or data to work this?

Also, when using mapping plug-in, say I want to add a new object to the donut data, how do I do that?

Paul Manzotti Paul Manzotti · Accepted Answer · 2013-06-05T12:44:04

Have a look at what properties are on your viewModel after you've called the mapping plugin. Looking at your json, you don't have a property called donuts. You probably should create your viewmodel first, then use the mapping plugin to update it:

var viewModel = DonutViewModel();
viewModel.donuts = ko.mapping.fromJS(donutData);

To add a new donut to the array, just use push:

viewModel.donuts.push(/*js representation of a donut*/);

binding array of data using knockout mapping plugin

1 Answers