Using RequireJS with Knockout and Knockout Mapping Merge Plugin

0
votes

I'm having trouble trying to use requireJS with knockout and the knockout mapping merge plugin (not the knockout mapping plugin), see link here: https://github.com/grofit/knockout.mapping.merge/blob/master/src/knockout.mapping.merge.js

script:

requirejs.config({
    paths: {
        'knockout': 'scripts/knockout-3.0.0',
        'ko-merge': 'scripts/knockout_mapping_merge'
    },
    shim: {
        'knockout_mapping_merge': {
            deps: ['knockout']
        }
    }
});

require(['knockout', 'ko-merge'], function (ko) {

    var vm = function () {
        var self = this;

        self.forename = ko.observable("FName1");
        self.surname = ko.observable("SName1");

        self.merge = function () {
            var x = {
                forename: 'FName2',
                surname: 'SName2'
            };

            ko.mapping.mergeFromJS(self, x);
        };
    };

    ko.applyBindings(new vm());
});

The error I'm receiving is: SCRIPT5007: Unable to set property 'mergeFromJS' of undefined or null reference File: knockout_mapping_merge.js, Line: 41, Column: 5

The knockout mapping merge is declared like so:

(function(knockout){
...
})(typeof exports === 'undefined'? this['ko'] : require("knockout"));

My understanding is that this should have called knockout as a dependency but it doesn't seem to work... any ideas why?

3
javascriptknockout.js

3 Answers

1
votes

Your problem is that the module name you're specifying in paths and in the shim config are different.

requirejs.config({
    paths: {
        'knockout': 'scripts/knockout-3.0.0',
        'ko-merge': 'scripts/knockout_mapping_merge'
    },
    shim: {
        'knockout_mapping_merge': {
            deps: ['knockout']
        }
    }
});

should be

requirejs.config({
    paths: {
        'knockout': 'scripts/knockout-3.0.0',
        'ko-merge': 'scripts/knockout_mapping_merge'
    },
    shim: {
        'ko-merge': {
            deps: ['knockout']
        }
    }
});
0
votes

That bit of code from the plugin is looking for a CommonJS scenario (e.g. nodejs modules) rather than an AMD scenario like requirejs.

Try shimming Knockout to export ko:

shim: {
    'knockout': {
       exports: 'ko'
     },
// you should be using the module ID rather than the filename here
    'ko-merge': {
        deps: ['knockout']
    }
}
0
votes

Thanks for the reply, unfortunately that didn't solve it, i ended up changing the plugin so it had the defines around it to work with requirjs:

define(['knockout'], function(knockout)  {
    knockout.mapping = {};
...
});