Knockout mapping add issue

Question

I have a method where I am trying to add a child to my parent, but when the call is made to the method, the context of the calling parent is undefined.

The code (abbreviated for clarity) Fiddle http://jsfiddle.net/poundingCode/THghy/

// Initialized the namespace
var my = {};
    my.models = {};

    // View model declaration
    my.vm = (function (model) {
        var memberVm = {
            id: ko.observable(model.Id),
            company: ko.observable(model.Company),
            fName: ko.observable(model.FName),
            lName: ko.observable(model.LName),
            name: ko.observable(model.Name),
            positions: ko.observableArray([]),
            totalPositions: ko.observable(),
            totalProjects: ko.observable()
        };

        // children
        memberVm.loadPositions = function (positions) {
            memberVm.totalPositions = 0;
            memberVm.totalProjects = 0;
            $.each(positions, function (i, p) {
                memberVm.positions.push( new my.models.Position()
                .company(p.Company)
                .companyId(p.CompanyId)
                 .description(p.Description)
                .id(p.Id)
                .memberId(p.MemberId)
                .name(p.Name)
                .title(p.Title)
                .projects(p.Projects) 
                );
                memberVm.totalPositions++;
                memberVm.totalProjects += p.Projects.length;
            });// end for each
        }; //end load positions

        memberVm.loadPositions(model.Positions);

        memberVm.fullName = ko.computed(function () {
            return this.fName() + ' ' + this.lName();
        }, memberVm);


        // Computed observable function.
        // We append it to the ViewModel here.

        // return object
        var vm = {
            id: memberVm.id,
            company: memberVm.company,
            fName: memberVm.fName,
            fullName: memberVm.fullName,
            lName: memberVm.lName,
            name: memberVm.name,
            positions: memberVm.positions,
            totalPositions: memberVm.totalPositions,
            totalProjects: memberVm.totalProjects,    

        };
        return vm;
    });

    /////////////////////////////////////
    // Add a position - or at least try to! this is where I get into trouble.

    my.vm.addPosition = (function () {
        var pos = new my.models.Position();
        pos.memberId = my.vm.id;
        my.vm.positions.push(pos);
    });
    /////////////////////////////////////
    // TypeError: my.vm.positions is undefined my.vm.positions.push(pos);
    my.models.Member = (function () {
            id = ko.observable();
            company = ko.observable(); 
            fName = ko.observable();
            lName = ko.observable();
            name = ko.observable();
            positions = ko.observableArray([]);

    });
    my.models.Position = (function () {
        this.company = ko.observable();          
        this.id = ko.observable();           
        this.memberId = ko.observable();
        this.name = ko.observable();
        this.title = ko.observable();
        // place holders
        this.totalProjects = ko.observableArray();
        this.totalCredits = ko.observableArray();
    });


 var viewModel = my.vm(data);
        ko.applyBindings(viewModel);
my.setUI();

The HTML

RP Niemeyer · Accepted Answer

The main issue is that your my.vm is a constructor function that you can use to create an instance of a my.vm. However, the addPosition function was added directly to my.vm and tries to push to my.vm.positions.

Ideally what you want to do is make the function available on an instance of your vm and push to that instance's positions array.

So, you would put addPosition inside your vm declaration and have it operate on the vm variable that you are returning. At that point your bindings run into issues when you add a new position, as company is empty and some of the bindings refer to company().Name

Knockout mapping add issue

Answers (1)

Related Questions