CODEWITHSUNDEEP
javascriptknockout.js
Raj
Raj

Reputation: 871

Using RequireJS with Knockout and Knockout Mapping Merge Plugin

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?

Upvotes: 0

Views: 170

Answers (3)

daedalus28
daedalus28

Reputation: 1637

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']
        }
    }
});

Upvotes: 1

Raj
Raj

Reputation: 871

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 = {};
...
});

Upvotes: 0

ebohlman
ebohlman

Reputation: 15003

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']
    }
}

Upvotes: 0

Related Questions