Sample with observable array

live sample with observable array

by rgopal_p

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<table>
    <thead>
        <th>GiftName</th>
        <th>Price</th>
    </thead>
        <tbody data-bind="foreach:gifts">
            <tr>
                <td><input data-bind="value:name"/></td>
                <td><input data-bind="value:price"/></td>
                <td><a href="#" data-bind="click: $root.removeGifts ">delete</a></td>
            <tr>
        </tbody>
                
</table>
                
     <button data-bind="click:addGifts">AddGifts</button>

CSS

input{
margin:2px;
padding:3px;
}

JavaScript

var GiftModel = function(gifts) {
    var self = this;
    self.gifts = ko.observableArray(gifts);
    self.addGifts = function() {
        self.gifts.push({
            name: "",
            price: ""
        });
        alert("new item added");
    };
    self.removeGifts = function(gift) {
        alert("an item removed");
        self.gifts.remove(gift);

    };

};

var viewModel = new GiftModel([
    {
    name: "Gift1",
    price: "123"},
{
    name: "Gift2",
    price: "234.00"},

{
    name: "Gift5",
    price: "202.00"}
]);

ko.applyBindings(viewModel);