jQuery - Good Practice

by graphicsxp

HTML

<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<table>
    <thead>
        <th>Selected</th>
        <th>Garantie</th>
        <th>Price</th>
    </thead>
    <tbody id="tblCovers" data-bind="foreach: Covers">
        <tr>
            <td><input type="checkbox" data-bind="checked: isSelected" /></td>
            <td><span data-bind="text: label"/></td>
            <td><span data-bind="text: displayPrice"/></td>
        </tr>        
    </tbody>
</table>

CSS

table {
    border: solid 1px black;
}
td {
    border: solid 1px black;
}

JavaScript

var data = {
    "Covers": [{
        "code": 23,
            "isSelected": false,
            "label": "RC",            
            "price": 120
    }, {
        "code": 76,
            "isSelected": true,
            "label": "DM",            
            "price": 150
    }]
};


var viewModel = ko.mapping.fromJS(data);

var CoverViewModel = function(data){
    var self = this;
    ko.mapping.fromJS(data, {}, self);
    self.displayPrice = ko.computed(function(){        
        return (self.isSelected() ? self.price() : 'N/A')
    });
};

var mapping = {
        'Covers': {
            create: function (options) {
                return new CoverViewModel(options.data);
            }
        }
};

ko.mapping.fromJS(data, mapping, viewModel);
ko.applyBindings(viewModel);