Knockoutjs.com - Cart editor example

http://knockoutjs.com/examples/cartEditor.html

by dingen2010

HTML

<script src="http://knockoutjs.com/examples/resources/sampleProductCategories.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<table width='100%' data-bind='foreach:lines'>
    <tr>
        <td>
            <select data-bind='options: sampleProductCategories, optionsText: "name", optionsCaption: "Select...", value: category'></select>
        </td>
        <td data-bind="with: category">
            <select data-bind='options: products, optionsText: "name", optionsCaption: "Select...", value: $parent.product'></select>
        </td>
        <td data-bind="with:product"> <span data-bind='text: price'> </span>

        </td>
        <td>
            <input type='text' data-bind='value:quantity,valueUpdate:"afterkeydown"' />
        </td>
        <td>total:<span data-bind='text:total()'></span>

        </td>
    </tr>
    <button data-bind='click:addline()'/>
</table>

JavaScript

var line = function () {
    var self = this;
    self.category = ko.observable();
    self.product = ko.observable();
    self.price = ko.observable();
    self.quantity = ko.observable(1);

    self.total = ko.computed(function () {
        //debugger;
        //console.log(self.quantity());
        //debugger;
        return self.product() ? self.product().price * self.quantity() : 0;
    })

    console.log(self.quantity());
    //console.log(self.product().price);
}

var cart = function(){
var self=this;
    self.lines=ko.observableArray();
    
    self.addline=function(){
    alert('add');
    }
}

ko.applyBindings(new cart());