AMD/RequireJS support

[sgentile]

The lastest branch of Knockout supports AMD/RequireJs. While converting your code to also use AMD/RequireJS ran into some issues. The knockout.mapping has the following function in it:

ko.exportSymbol = function (publicPath, object) {
var tokens = publicPath.split(".");
var target = window;
for (var i = 0; i < tokens.length - 1; i++)
target = target[tokens[i]];
target[tokens[tokens.length - 1]] = object;
};

and it uses the var target = window as the start. knockout.js has a
similar function, but it uses target = ko as the start.

I'd like to ask for that change, and
that way the ko.exportSymbol() usage at the bottom of the file can be
reduced. It is unclear though that any of that export symbol stuff is
needed at all in the mapping file since it starts at the top of the
file and does a ko.mapping = {} anyway.

[sagacity]

Hi Steve, Domenic Denicola just provided us with a module wrapper. It's now part of the master branch, maybe you can take a look and see if it already meets your needs?

[sgentile]

Great - Thank you !

[younes200]

Hi, Is there a example to how to use knockout and knockout.mapping with requiresjs ? Here the code I'm using but with no luck :

define([ "order!jQuery"
       , "order!libs/knockout/knockout"         
       , "order!libs/knockout/knockout.mapping"
       ]
       , function() {
           return ko; 
         }
      );

I'm getting : Load timeout for modules: knockout http://requirejs.org/docs/errors.html#timeout

Thank you

[sgentile]

the latest branch has native support for RequireJS - as well as the latest mapping - so you don't need the 'order' plugin

[sgentile]

require({
paths: {
jqueryvalidate: 'libs/jquery/jquery.validate',
jqueryui: 'libs/jquery/jquery-ui-1.8.11.min',
bootstrap: 'libs/jquery/bootstrap',
knockout: 'libs/knockout/knockout-latest.debug',
komapping: 'libs/knockout/knockout.mapping-latest.debug',
}
}, ['csmain'], function ($) {

});

in 'main' then something like this:
define(['jquery', 'knockout', 'komapping'], function($, ko, komapping) {
...
}

[younes200]

Thank you, works fine !

[Gooseus]

You guys don't seem to be using the order plugin to load knockout before knockout.mapping, how are you handling the dependency? I'm trying to get them working together and am getting "ko is null" when knockout.mapping is loaded

require(['jquery', 'jquery.form', 'jquery.colorbox.min', 'jquery.tmpl.min', 'jquery.easing.1.3', 'jquery.bxSlider.min', 'knockout', 'knockout.mapping.debug', 'q.min', 'js/humane.min.js'],
function($,ko,komap,q) {
        // Never get's here - 'ko is null on line 16'
    console.log([$,ko,komap,q,window.humane]);

});

[domenic]

Your module ID <-> parameter map seems incorrect. You'd have to fix it like so:

require(['jquery',
        'jquery.form',
        'jquery.colorbox.min',
        'jquery.tmpl.min',
        'jquery.easing.1.3',
        'jquery.bxSlider.min',
        'knockout',
        'knockout.mapping.debug',
        'q.min',
        'js/humane.min.js'],
        function($, jQueryForm, jQueryColorBox, jQueryTmpl, jQueryEasing, jQueryBxSlider, ko, komap, q) {

    console.log([$,ko,komap,q,window.humane]);

});

or like so (my preferred approach, if you can switch to define instead of require):

define(['jquery',
        'jquery.form',
         'jquery.colorbox.min',
         'jquery.tmpl.min',
         'jquery.easing.1.3',
         'jquery.bxSlider.min',
         'knockout',
         'knockout.mapping.debug',
         'q.min',
         'js/humane.min.js'],
        function(require) {

    var $ = require("jquery");
    var ko = require("knockout");
    var komap = require("knockout.mapping.debug");
    var q = require("q.min");

    console.log([$,ko,komap,q,window.humane]);
});

[Gooseus]

I forgot to mention that I'm using the require-jquery.js from here:

http://requirejs.org/docs/jquery.html

So I shouldn't need to specify the jquery plugins separately in the arguments, other than that I don't see a difference between your first example and mine? I'll give your second approach a shot, though I'm getting the error in the ko.mapping so my callback doesn't even run.

[domenic]

There is a one-to-one mapping between elements of the array and arguments to the callback. So in your example, ko (the second argument) is getting the exports from jquery.form (the second element of the array), which are null.

[Gooseus]

I simplified it to remove all the other modules and made sure they're ordered correctly:

require(['jquery', 'knockout', 'knockout.mapping.debug'],
function($,ko,komap) {
    console.log([$,ko,komap]);

});

I'm still getting the same 'ko is null' error in knockout.mapping.debug

[domenic]

And you have the latest Knockout/Knockout Mapping?

https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js
https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js

[Gooseus]

Ah, looks like not... I had been using version 2.0.0 for knockout and saw a define function the source and a pull request for RequireJS support in 1.3.1 so I thought I was good.

Thank you sir for prompt assistance, I seem to be in business!