Knockout JS Computed Property Test

by Muhammad Dawood Awan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/src/js/bootstrap-datetimepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/build/css/bootstrap-datetimepicker.css">
<div class="col-md-3">
    <div class="form-group">
        <label class="control-label">Price Type</label>
    </div>
</div>
<div class="col-md-3">
    <div class="form-group">
        <label class="control-label">Quantity</label>
        <input type="text" class="form-control" data-bind="numeric: Quantity, value: Quantity, valueUpdate: 'afterkeydown', disable: isDeleted" />
        <!--numeric: number, value: number, valueUpdate: 'afterkeydown'-->
    </div>
</div>
<div class="col-md-3">
    <div class="form-group">
        <label class="control-label">Price</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" data-bind="numeric: Price, value: Price, valueUpdate: 'afterkeydown', disable: isDeleted" />
        </div>
    </div>
</div>
<div class="col-md-2">
    <div class="form-group">
        <label class="control-label">Total</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" data-bind="textInput: Total, disable: isDeleted" />
        </div>
    </div>
</div>
<div class="col-md-1"> <span class="glyphicon glyphicon-remove" data-bind="click: remove"></span>

</div>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

<p data-bind="text: isDeleted"></p>

JavaScript

var viewModel = {};

function QuoteViewModel() {
    var self = this;
    self.Quantity = ko.observable();
    self.Price = ko.observable();
    self.Total = ko.computed(function () {
        return this.Price() * this.Quantity();
    }, this);
    self.isDeleted = ko.observable(false);


    self.remove = function (item) {
        console.log('A');
        item.isDeleted = ko.observable(true);
        console.log(item.isDeleted());
        // item.isDeleted = ko.observable(false);
        // console.log(item.isDeleted())
    };
        
};

viewModel = new QuoteViewModel();
ko.applyBindings(viewModel);