Knockout JS - binding data objects of select lists

There are a few issues here.

Your select arrays are declared as self.planTypes = .... self is a variable inside the constructor of myViewModel. You should be getting an exception that this point but something has declared a self variable to equal window.

Your selected... observables are also all on window scope, and not enclosed in myViewModel.

When you add a new claim line, I'm getting a javascript errors depending on what you select, like if expenseType is null.

Solution

I have created a top level namespace call Models and attached everything to that. I have created an explicit class for the edit claim line. This allows you to added various help functions and observables without polluting the claimlines themselves. I have changed all the options bindings to remove the Id parameter. I find it a lot easier to work with the object instead of constantly looking up the array member.

I have implemented the Add and Update functions.

I also removed the datapicker jQuery call, as you need to do more work to update the observable when using this plugin. DatePicker plugin and Knockout do not work side-by-side without assistance ( ie custom binding ).

I also added the letters E and R ( Edit and Remove ) in your claim line's buttons as I wasn't getting any UI ( missing CSS in your fiddle? )

HTML

<section class="row top10">
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-md-offset-2 col-lg-offset-2">
        <form class="form-horizontal col-xs-12 col-sm-12 col-md-12 col-lg-12" role="form" data-bind="with: newClaimLine">
            <div class="form-group">
                <label for="serviceStartDate" class="col-sm-4 control-label">Service Start Date</label>
                <div class="col-sm-4">
                    <input id="serviceStartDate" type="date" class="form-control datepicker" data-bind="value: serviceStartDate" placeholder="mm/dd/yyyy" />
                </div>
            </div>
            <div class="form-group">
                <label for="serviceEndDate" class="col-sm-4 control-label">Service End Date</label>
                <div class="col-sm-4">
                    <input id="serviceEndDate" type="date" class="form-control datepicker" data-bind="value: serviceEndDate" placeholder="mm/dd/yyyy" />
                </div>
            </div>
            <div class="form-group">
                <label for="planType" class="col-sm-4 control-label">Plan Type</label>
                <div class="col-sm-4">
                    <select id="planType" class="form-control" data-bind="options: Models.planTypes, optionsText: 'name', optionsCaption: 'Choose Plan Type', value: planType"></select>
                </div>
            </div>
            <div data-bind="if: isClaimFor">
                <div class="form-group">
                    <label for="claimForWhom" class="col-sm-4 control-label">Claim For</label>
                    <div class="col-sm-4">
                        <select id="claimForWhom" class="form-control" data-bind="options: Models.claimForWhom, optionsText : 'name', optionsCaption: 'Select Dependent', value: claimFor"></select>
                    </div>
                </div>
            </div>
            <div data-bind="if: isExpenseType">
                <div class="form-group">
                    <label for="expenseType" class="col-sm-4 control-label">Expense Type</label>
                    <div class="col-sm-4">
                        <select id="expenseType" class="form-control" data-bind="options: Models.expenseTypes, optionsText : 'name', optionsCaption: 'Select Expense Type', value: expenseType"></select>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="amount" class="col-sm-4 control-label">Amount</label>
                <div class="col-sm-4">
                    <input id="amount" type="number" class="form-control" data-bind="value: amount" placeholder="Enter Amount" />
                </div>
            </div>
            <div class="form-group">
                <label for="provider" class="col-sm-4 control-label">Provider</label>
                <div class="col-sm-4">
                    <select id="provider" class="form-control" data-bind="options: Models.providers, optionsCaption: 'Choose Provider Type', value: provider"></select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-6 col-sm-offset-4">
                    <button class="btn btn-default" data-bind="click: $root.addClaimLine, enable: !claimId()"><i class="fa fa-plus fa-lg fa-fw"></i> Add Claim Line</button>
                    <button class="btn btn-default" data-bind="click: $root.updateClaimLine, enable: claimId"><i class="fa fa-refresh fa-lg fa-fw"></i> Update Claim Line</button>
                </div>
            </div>
        </form>
        <!-- Desktop saved claim lines -->
        <table class="hidden-xs table table-responsive table-condensed" data-bind="visible: claimLines().length > 0">
            <thead>
                <tr>
                    <th colspan="2">Saved Claim Lines   <span class="pull-right">Claim Total = <span data-bind="text: grandTotal()"></span></span>
                    </th>
                </tr>
            </thead>
            <tbody data-bind="foreach: claimLines">
                <tr>
                    <td>
                        <p><strong><span data-bind="text: planTypeName().name"></span> - <span data-bind="text: expenseTypeName().name"></span><br /></strong><strong data-bind="text: $root.grandTotal()"></strong> claim incurred between <strong data-bind="text: serviceStartDate"></strong> and <strong data-bind="text: serviceEndDate"></strong>.</p>
                    </td>
                    <td class="text-right">
                        <button data-bind="click: $root.editClaimLine" class="btn btn-link">    <i class="fa fa-edit fa-2x">E</i>

                        </button>
                        <button data-bind="click: $root.removeClaimLine" class="btn btn-link">  <i class="fa fa-times fa-2x">R</i>

                        </button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th class="text-right" colspan="2"> <span>Claim Total = <span data-bind="text: grandTotal()"></span></span>
                    </th>
                </tr>
            </tfoot>
        </table>
        <!-- Mobile saved claim lines -->
        <div class="hidden-sm hidden-md hidden-lg" data-bind="visible: claimLines().length > 0">
                <h3 class="body">Saved Claim Lines</h3>

            <div data-bind="foreach: claimLines">
                <div>
                    <p>Your <strong data-bind="text: planTypeName().name"></strong> incurred a <strong data-bind="text: expenseTypeName().name"></strong> claim for <strong data-bind="text: $root.grandTotal()"></strong> between <strong data-bind="text: serviceStartDate"></strong> - <strong data-bind="text: serviceEndDate"></strong>.</p>
                    <p>
                        <button data-bind="click: $root.editClaimLine" class="btn btn-default"> <i class="fa fa-edit fa-lg"></i> Edit Claim Line</button>
                        <button data-bind="click: $root.removeClaimLine" class="btn btn-default">   <i class="fa fa-times fa-lg"></i> Delete Claim Line</button>
                    </p>
                </div>
            </div>
        </div>
            <h3 class="body">Attach Supporting Documentation</h3>

        <button class="btn btn-default btn-lg" role="button">   <i class="fa fa-cloud-upload fa-3x fa-fw pull-left"></i>
    <span class="pull-left text-left">Upload<br />Documentation</span>

        </button>
        <hr />
        <div class="pull-right">
            <button class="btn btn-link btn-lg">Cancel</button>
            <button class="btn btn-default btn-lg" role="button">   <i class="fa fa-check fa-fw"></i>Verify Claim</button>
        </div>
    </div>
</section>

Javascript

var Models = window["Models"] = {};

(function () {

    Models.ViewModel = function () {
        var self = this;

        var newClaimId = 0;
        self.claimLines = ko.observableArray(ko.utils.arrayMap(claimLines, function (claimLine) {
            return new Models.ClaimLine("","","","","","", "");
        }));

        // Changed newClaimLine to observable with empty ClaimLine
        self.newClaimLine = new Models.EditClaimLine();

        self.editClaimLine = function(claimLineItem) {
            self.newClaimLine.edit(claimLineItem);
        };
/*
        self.editClaimLine = function (claimLineItem) {
            var editable = new ClaimLine(claimLineItem.serviceStartDate(), claimLineItem.serviceEndDate(), claimLineItem.planType(), claimLineItem.expenseType(), claimLineItem.amount(), claimLineItem.provider());

            claimLineBeingEdited = claimLineItem;
            self.newClaimLine(editable);
            var test = 'test';
        };
*/

        // The only thing the update method does is emptying the editor form
        self.updateClaimLine = function (claimLineBeingUpdated) {

            var foundClaim = ko.utils.arrayFirst( self.claimLines(), function(item) { return item.claimId() == claimLineBeingUpdated.claimId(); } );

            var test = 'test';
            foundClaim.serviceStartDate(claimLineBeingUpdated.serviceStartDate());
            foundClaim.serviceEndDate(claimLineBeingUpdated.serviceEndDate());
            foundClaim.planType(claimLineBeingUpdated.planType());
            foundClaim.expenseType(claimLineBeingUpdated.expenseType());
            foundClaim.amount(claimLineBeingUpdated.amount());
            foundClaim.provider(claimLineBeingUpdated.provider());
            foundClaim.claimFor(claimLineBeingUpdated.claimFor());
            self.newClaimLine.reset(); //(new ClaimLine("","","","","",""));
        };

        // This method can only be used for adding new items, not updating existing items
        self.addClaimLine = function (claimLineBeingAdded) {
            var newClaim = new Models.ClaimLine(claimLineBeingAdded.serviceStartDate, claimLineBeingAdded.serviceEndDate, claimLineBeingAdded.planType, claimLineBeingAdded.expenseType, claimLineBeingAdded.amount, claimLineBeingAdded.provider, claimLineBeingAdded.claimFor);
            newClaim.claimId(++newClaimId);

            self.claimLines.push(newClaim);

            self.newClaimLine.reset(); //(new ClaimLine("","","","","",""));
        };

        //remove an existing claim line
        self.removeClaimLine = function (claimLine) {
            self.claimLines.remove(claimLine);
        }

        //aggregate claim amounts
        self.grandTotal = ko.computed(function() {
            var total = 0;
            $.each(self.claimLines(), function() {
                total += parseFloat(this.amount())
            });
            return "$" + total.toFixed(2);
        });
    };

    Models.EditClaimLine = function() {
        var self = this;

        self.claimId = ko.observable();
        self.serviceStartDate = ko.observable();
        self.serviceEndDate = ko.observable();
        self.planType = ko.observable();
        self.claimFor = ko.observable();
        self.expenseType = ko.observable();
        self.amount = ko.observable();
        self.provider = ko.observable();

        self.isClaimFor = ko.computed(function(){
            var selectedPlanType = self.planType();
            return selectedPlanType && !!selectedPlanType.hasClaimFor;
        });
        self.isExpenseType = ko.computed(function(){
            var selectedPlanType = self.planType();
            return selectedPlanType && !!selectedPlanType.hasExpenseType;
        });

        self.reset = function(){
            self.claimId(undefined);
            self.serviceStartDate(undefined);  
            self.serviceEndDate(undefined);  
            self.planType(undefined);  
            self.claimFor(undefined);  
            self.expenseType(undefined);  
            self.amount(undefined);  
            self.provider(undefined);  
        };

        self.edit = function(claim) {
            self.claimId(claim.claimId());
            self.serviceStartDate(claim.serviceStartDate());  
            self.serviceEndDate(claim.serviceEndDate());  
            self.planType(claim.planType());  
            self.claimFor(claim.claimFor());  
            self.expenseType(claim.expenseType());  
            self.amount(claim.amount());  
            self.provider(claim.provider());  
        };

        self.reset();
    }

    Models.ClaimLine = function(serviceStartDate, serviceEndDate, planType, expenseType, amount, provider, claimFor) {
        var line = this;

        var getName = function(value){
            return (ko.unwrap(value) || { name: '' }).name;
        };

        line.claimId = ko.observable();
        line.serviceStartDate = ko.observable(ko.unwrap(serviceStartDate));
        line.serviceEndDate = ko.observable(ko.unwrap(serviceEndDate));
        line.planType = ko.observable(ko.unwrap(planType));
        line.expenseType = ko.observable(ko.unwrap(expenseType));
        line.amount = ko.observable(ko.unwrap(amount));
        line.provider = ko.observable(ko.unwrap(provider));
        line.claimFor = ko.observable(ko.unwrap(claimFor));

        line.expenseTypeName = ko.computed(function() {
            return getName(line.expenseType);
        });

        line.planTypeName = ko.computed(function() {
            return getName(line.planType);
        });

    }

    var claimLines = [
    ];

    Models.planTypes = [
        { id: 1, name: 'The EBC HRA - Deductible', hasClaimFor: true, hasExpenseType: false },
        { id: 2, name: 'FSA - Health Care FSA', hasClaimFor: false, hasExpenseType: true },
        { id: 3, name: 'FSA - Dependent Care FSA', hasClaimFor: false, hasExpenseType: true }
    ];

    Models.claimForWhom = [
        { id: 1, name: "Self"},
        { id: 2, name: "Boston Allen (Dependent)"},
        { id: 3, name: "Bishop Allen (Dependent)"},
        { id: 4, name: "Billy Allen Jr (Dependent)"},
        { id: 5, name: "Billy Allen Sr (Dependent)"},
        { id: 6, name: "Name not listed"}
    ];
    Models.expenseTypes = [
        { id: 1, name: "Chiropractic"},
        { id: 2, name: "Dental"},
        { id: 3, name: "Massage Therapy"},
        { id: 4, name: "Medical"},
        { id: 5, name: "Medical Mileage"},
        { id: 6, name: "Office Visit"},
        { id: 7, name: "Optical"},
        { id: 8, name: "Orthodontic"},
        { id: 9, name: "OTC"},
        { id: 10, name: "Prescription"},
        { id: 11, name: "Supplement/Vitamin"},
        { id: 12, name: "Therapy"}
    ];

    Models.providers = [
        "Dean",
        "Mercy Health",
        "UW Health",
        "Aurora"
    ];




})();

$(document).ready(function(){

    var myViewModel = new Models.ViewModel();
    ko.applyBindings(myViewModel);
    //$('.datepicker').datepicker();
});