Nested mapped models knockoutjs

by jiggle

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<div data-bind="foreach: feedbacks.EmployeeFeedbackRequestSubmissions">
    <div>
         <h3 data-bind="text: EmployeeHeading">
                        </h3>

        <div>
            <table>
                <thead>
                    <tr>
                        <th>Employee Worked With</th>
                        <th>Projects Worked</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: EmployeesWorkedWith">
                    <tr>
                        <td> <span data-bind="text: EmployeeName"></span>

                             <span data-bind="text: nameUpper"></span> 
                        </td>
                        <td>
                            <div>
                                <select data-bind="options: ProjectsWorked, value: 'ProjectName', optionsText: 'ProjectName'"></select>
                            </div>
                        </td>
                        <td> <a class="btn btn-primary" href="#">Reject</a>
 <a class="btn btn-success" href="#">Send</a>

                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

JavaScript

function Container() {
    var instance = this;

    instance.FeedbackViewModel = function (data) {
        var self = this;

        self.mappingOptions = {
            // overriding default creation/initialization code
            'EmployeeFeedbackRequestSubmissions': {
                create: function (options) {
                    return (new(function () {
                        this.EmployeeHeading = ko.computed(function () {
                            return "Performance Evaluation Employee: " + this.Employee();
                        }, this);
                        
                        var mapOptionsEmpWorkedWith= {
                            'EmployeesWorkedWith': {
                                create: function (options) {
                                   // return new instance.EmployeesWorkedWithModel(options);
                                    return (new(function(){
                                        
                                        console.log('Processing EmployeesWorkedWith');
                                        console.log(options.data);
                                        
                                        console.log(this);
                                        ko.mapping.fromJS(options.data, {}, this);
                                
                                        this.nameUpper = ko.computed(function () {
                                            return this.EmployeeName().toUpperCase();
                                        }, this);
                                    })());
                                }
                            }
                        };
                                            
                        console.log('Processing EmployeeFeedbackRequestSubmissions');
                        console.log(options.data);
                        console.log(mapOptionsEmpWorkedWith);
                        console.log(this);
                        
             ...