<button id="load">Load</button>
<ul data-bind="template: { foreach: vendors }">
<li><span data-bind="text: Id"></span></li>
</ul>

var data = http://www.mamicode.com/[];
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);
}
});
});
});