Working with KnockoutJS

Knockout is a JavaScript library that helps you to create rich, responsive display with a clean underlying data model. To create a view model with Knockout, we declare the following JavaScript object:
var initialData = [
{ name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
{ name: "Speedy Coyote", sales: 89, price: 190.00 },
{ name: "Furious Lizard", sales: 152, price: 25.00 },
{ name: "Indifferent Monkey", sales: 1, price: 99.95 },
{ name: "Brooding Dragon", sales: 0, price: 6350 },
{ name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
{ name: "Optimistic Snail", sales: 420, price: 1.50 }
];
Then, we create the following Model:
var GridModel = function (items) {
this.items = ko.observableArray(items);
this.disabled = ko.observable(false);
this.addItem = function () {
// add a new item.
if (this.items().length < 20) {
this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
}
};
this.removeItem = function () {
// remove the last item.
this.items.pop();
};
this.updateItem = function () {
// update the first item.
var item = {};
item.name = initialData[Math.floor(Math.random() * initialData.length)].name;
item.sales = Math.floor(Math.random() * 500);
item.price = Math.floor(Math.random() * 200);
this.items.replace(this.items()[0], item);
};
};
The model adds, removes and updates items. To activate Knockout, we need to call the applyBindings method and pass the view model object that we want to use.

var model = new GridModel(initialData);
ko.applyBindings(model);

The next step is to create the Grid and the add, update and remove buttons which will be bound to the addItem, removeItem and updateItem functions. Clicking a button will call a specific function.

The HTML markup is shown below:
<div id="jqxWidget">
<div style="margin-bottom: 10px;">
<input id="addButton" type="button" data-bind="click: addItem, jqxButton: { theme: 'classic' }" value="Add Item">
<input id="removeButton" type="button" data-bind="click: removeItem, jqxButton: { theme: 'classic' }" value="Remove Item">
<input id="updateButton" type="button" data-bind="click: updateItem, jqxButton: { theme: 'classic' }" value="Update Item">
<div data-bind="jqxCheckBox: { checked: disabled, theme: 'classic' }" style="margin-top: 5px;" id="checkBox">Disabled</div>
</div>
<div data-bind="jqxGrid: {
source: items, disabled: disabled, autoheight: true,
editable: true,
selectionmode: 'singlecell',
theme: 'classic',
columns: [
{ text: 'Name', dataField: 'name', width: 200 },
{ text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
{ text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
]
}" id="jqxgrid">
</div>
<table style="margin-top: 20px;">
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: sales"></td>
<td data-bind="text: price"></td>
</tr>
</tbody>
</table>
</div>
Below is the example's full source code: