Using ScriptSharp with Knockout.Mapping through Re

问题:

I'm struggling with all the Script# Dependency loading.

I have a Script# Project referencing the knockout library. Which I got to work after some time with RequireJS.

Now I'd like to use KnockoutJS mapping which complies to something like

var model = ko.mapping.fromJS(data, {}, new ViewModel());

However ko.mapping is undefined.

If I manually (for testing only) change the compiled .js file to include mapping like this:

define('MyApp',
    ['ss', 'jquery', 'knockout', knockout.mapping],
    function (ss, $, ko, mapping) { /*...*/ }
);

'mapping' is defined, but not as 'ko.mapping', which is how the compiler references it.

Any ideas?

This is my config:

requirejs.config({
    paths: {
        'jquery': 'jquery-1.9.1',
        'jqueryValidation': 'jquery.validate',
        'knockout': 'knockout-2.2.0',
        'knockout.mapping': 'knockout.mapping-latest.debug',
        'modernizr': 'modernizr-2.6.2'
    },
    shim: {
        'jqueryValidation': ['jquery'],
        'jquery.validate.unobtrusive': ['jquery', 'jqueryValidation'],
        'jquery.unobtrusive-ajax': ['jquery'],
        'knockout.mapping': ['knockout']
    }
});

回答1:

It sounds like Script# is assuming that ko and ko.mapping are in the global namespace, not loaded as AMD. BUT, Knockout and Knockout.mapping are coded such that when they detect AMD/RequireJS, they do not use the global namespace.

A couple options to work around this:

1 - Inject it right after require.config is called (based on comments below) rather than waiting for something to actually request knockout or knockout.mapping

requirejs.config({
    // same as original
});

require(["knockout", "knockout.mapping"], function (ko, m) {       
    ko.mapping = m; 
})

2 - create your own wrapper module to inject it back into global. Something like this:

define('knockout.inject', ['knockout'], function(k)
{
  window.ko = k; // make a ko global
  return k; // but also return what a normal AMD require expects
});

define('knockout.mapping.inject', ['knockout.mapping'], function(m)
{
  window.ko.mapping = m; // make a ko.mapping global
  return m; // but also return what a normal AMD require expects
});

THEN, you can make a RequireJS map configuration so that whenever you request 'knockout' or 'knockout.mapping', they get transparently remapped to your above wrappers.

requirejs.config({
    paths: { // same as original },
    shim: { // same as original },
    map: {
      '*': {
        'knockout': 'knockout.inject',
        'knockout.mapping': 'knockout.mapping.inject'
      },
      // prevent cycles
      'knockout.inject': {'knockout': 'knockout'},
      'knockout.mapping.inject': {'knockout.mapping': 'knockout.mapping'}
    }
});

回答2:

This sample (https://github.com/nikhilk/scriptsharp/tree/cc/samples/KOWorld) shows using script# + knockout along with requirejs as the AMD loader.

Be sure to see the script template in AssemblyInfo.js to make all this work.

Hopefully this will help and work.