knockoutjs.com

by gurkavcu

HTML

<link rel="stylesheet" href="http://learn.knockoutjs.com/Content/App/coderunner.css">
<link rel="stylesheet" href="http://learn.knockoutjs.com//Content/TutorialSpecific/loadingsaving.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<div id="knockout">
    <table>
        <thead>
            <tr>
                <th>Name</th><th>Price</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: ExampleData">
            <tr>
                <td data-bind="text: Name"></td>
                <td data-bind="text: Price"></td>
            </tr>    
        </tbody>
    </table>
</div>

JavaScript

function getRandomData() {
    return [{
        "Name": "Apple",
        "Price": (Math.random()*10)+1},
    {
        "Name": "Orange",
        "Price":(Math.random()*10)+1},
    {
        "Name": "Banana",
        "Price": (Math.random()*10)+1},
    {
        "Name": "Melon",
        "Price": (Math.random()*10)+1}];
}
function ExampleViewModel() {
    var self = this;
    self.ExampleData = ko.observableArray([]);    
    self.update = function() {
          $.ajax("/echo/json/", {
            data: {
                json: ko.toJSON(getRandomData())
            },
            type: "POST",
            dataType: 'json',
            success: function(allData) {        
                var mappeddata = $.map(allData, function (item){
                    return new DataItem(item)
                });
                self.ExampleData(mappeddata);
            }
        }); 
    }  
}

function DataItem(data) {
    //console.log(data);
    this.Name = ko.observable(data.Name);
    this.Price = ko.observable(data.Price);
}

var exampleViewModel = new ExampleViewModel();
window.setInterval(exampleViewModel.update,1000);
ko.applyBindings(exampleViewModel);