Knockout.js repeat rows in table for nested model / containerless “foreach” inside table

http://stackoverflow.com/questions/9731282/knockout-js-repeat-rows-in-table-for-nested-model-containerless-foreach-insi

by madcapnmckay

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<button id="load">Load</button>
<ul data-bind="template: { foreach: vendors }">
    <li><span data-bind="text: Id"></span></li>
</ul>

JavaScript

var data = [];   
var viewModel = {
    vendors: ko.observableArray(data)
};
ko.applyBindings(viewModel);

$(function () {
    // on this click event, we popular the observable array
    $('#load').click(function () {
        // WORKS. Html is updated appropriately.
        viewModel.vendors([{ "Id": "01" },{ "Id": "02" },{ "Id": "03" }]);
        
        $.ajax({
            url: '/echo/json/',
            type: "POST",
            /*contentType: "application/json; charset=utf-8",*/
            data:{
                json: JSON.stringify( {
                    result:[{ "Id": "02" },{ "Id": "03" },{ "Id": "04" }]
                }),
                delay: 3
            },
            dataType: 'json',
            success: function (data) {
                console.log(data);
                viewModel.vendors(data.result);
            }
        });
    });
});