Add Record Functionality for Knockoutjs and mapper extension

Question

In the following code I am trying to add an Option/Prelim row for add/insert. I was expecting this to work and am at a loss for why my view is not being updated when the Add Option button is clicked.

  $.postJSON('/Admin/GetPrelimsByJob', { jobId: 109 }, function(data) {
            var length = data.length;
            var insertRecord = {};

            if (length > 0) {
                insertRecord = data[data.length - 1]; //last record is an empty PremlimViewModel for insert

                data.splice(data.length - 1, 1); //remove that blank insert record
            }
            var mapping = {
                create: function(options) {
                    //customize at the root level.  
                    var innerModel = ko.mapping.fromJS(options.data);

                    innerModel.addOption = function() {
                         innerModel.push(ko.mapping.fromJS(insertRecord));
                    };

                    return innerModel;
                }
            }

            viewModel = ko.mapping.fromJS({ prelims: data }, mapping);
            ko.applyBindings(viewModel);

        });

And the following HTML:

   <div class="options-body" data-bind="foreach: prelims">
        <div class="options-row-container">
            <div data-bind="attr: { 'data-id': PrelimId }" class="options-row">
                <div class="options-col">
                    <div class="ui-widget">
                        <select class="custom-combox-select" data-bind="foreach: Options, combobox: Option">
                            <!-- ko if: $index() === 0 -->
                            <option value=""></option>
                            <!-- /ko -->
                            <option data-bind="text: OptionLetterText, attr: { value: OptionLetterValue }, attrIf: { selected: 'selected', _if: OptionLetterSelected }"></option>
                        </select>
                    </div>
                </div>

                <div class="options-col text-center">
                    <input type="text" data-bind="value: Qty" />
                </div>
            </div>
        </div>
    </div>
    <button type="button" data-bind="click: prelims.addOption">
        Add Option
    </button>

Answer 1

Ok so I had two things that were incorrect:

1)I needed to declare a template:

   <div class="options-body" data-bind="template: { name: 'PrelimsTemplate', foreach: prelims }">

2) I appended the property name "prelims" to my viewModel so one line change in my mapping:

  var mapping = {
                    create: function (options) {
                        //customize at the root level.  
                        var innerModel = ko.mapping.fromJS(options.data);

                        innerModel.addOption = function () {
                            innerModel.prelims.push(ko.mapping.fromJS(insertRecord));
                        };

                        return innerModel;
                    }
                }