ko.mapping test

HTML

<!-- ko foreach: selectedOptions -->
    <h3><span data-bind="text: description"></span></h3>
    <table class="table table-striped table-condensed">
        <thead>
            <tr>
                <th colspan="2" style="text-align: left;">Description</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <!-- ko foreach: options -->
            <tr>
                <td><input type="radio" data-bind="checkedValue: $data, checked: $parent.selection, attr:{name: $parent.name}" /></td>
                <td style="text-align: left;"><span data-bind="text: name"></span></td>
                <td style="text-align: left;"><span data-bind="text: price"></span></td>
            </tr>
            <!-- /ko -->
        </tbody>
    </table>
<!-- /ko -->

CSS

h3 {
padding-top: 10px;
font-weight: bold;
}

JavaScript

var myutils = myutils || {}; // if namespace is not defined, make it equal to an empty object

myutils.ko = (function(){
    var createComputedDepdency = function(targetDependency, options){
        
        console.log("create computed dependency...\ntarget: %o.\n options:%o",targetDependency,options);
        
        var computedProperty = ko.computed(function(){

            var targetValue = targetDependency;
            
            console.log("%o",targetValue);
            
            if(typeof targetValue === "undefined" || typeof targetValue.selection() === "undefined")
                return [];
            
            return ko.utils.arrayFilter(
                options,
                function(opt){
                
                    //console.log("searching computed...\noption: %o\nselection: %o ", opt, targetValue.selection());
                    
                    if(typeof opt.requires === "undefined")
                        return true;
                    else
                        return opt.requires && opt.requires.indexOf(targetValue.selection().sku) > -1;
                });
        });        
        return computedProperty;
    };
    
    var productSection = function(description, name, options, isCalculated){
        console.log("new section. description: " + description + ". name: " + name);
        var self = this;
        self.description = ko.observable(description);
        self.name = name;
        self.selection = ko.observable();
        self.options = options;
        self.isCalculated = isCalculated;
    }
    
    var createProductViewModel = function(options){
        
        var viewModel = {};      
        
        viewModel.selectedOptions = ko.observableArray();
        
        for(var i=0; i<options.length; i++)
        {
            var option = options[i];
            console.log("adding option " + option.name);
            
            if(option.requires)
            {                
               ...