JSFiddle - React, Tailwind, and code Playground

by tridip

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<button onClick="javascript:AddNewData();return false;">Add New Data</button>

<button onClick="UpdateData()">Update Data</button>
<br><br>
	  <table class="imagetable">
      <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Price</th> 
        <th>Status</th> 
      </tr>
      </thead>
      <tbody data-bind="foreach:Stocks">
        <tr>
          <td><Span data-bind="text:Id" /></td>
          <td><Span data-bind="text:Name" /></td>
          <td><Span data-bind="text:Price" /></td>
          <td><Span data-bind="text:Status" /></td>
        </tr>
      </tbody>
    </table>

CSS

table.imagetable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
}
table.imagetable th {
	background:#b5cfd2 url('cell-blue.jpg');
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #999999;
}
table.imagetable td {
	background:#dcddc0 url('cell-grey.jpg');
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #999999;
}

JavaScript

var data= [
 { "Id": "12345", "Name": "Acme Widget 1", "Price": "£25.99", "Status": "In Stock"  },
 { "Id": "67890", "Name": "Acme Widget 2", "Price": "£28.99", "Status": "In Stock"  },
 { "Id": "11123", "Name": "Acme Widget 3", "Price": "£15.99", "Status": "In Stock"  },
 { "Id": "14156", "Name": "Acme Widget 4", "Price": "£33.99", "Status": "In Stock"  }
];

var NewData= 
 [{ "Id": "99999", "Name": "HSL Limited", "Price": "£78.99", "Status": "In Stock"  }
];

var UpdateData= [{ "Id": "11123", "Status": "Out of Stock"  },
              { "Id": "12345", "Price": "31.45" }]


function AddNewData()
{
    alert("add");
    /*ko.utils.arrayForEach(NewData, function(item)
    {
        //appViewModel.Stocks.push.apply(item);
        self.Stocks.push.apply(self.Stocks,item);
    })    
    return false;*/
}

function UpdateData()
{
    alert("update");
    return false;
}


var appViewModel = function() 
{
   	this.Stocks = ko.observableArray([]);
    this.Stocks = ko.mapping.fromJS(data);
};
ko.applyBindings(appViewModel);