结合使用ScriptSharp和Knockout.Mapping通过RequireJS

问题描述

我正在为所有Script#依赖项加载而苦苦挣扎.

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

我有一个引用淘汰库的Script#项目.过一段时间，我需要使用RequireJS.

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

现在，我想使用符合类似条件的KnockoutJS映射

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

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

但是ko.mapping没有定义.

However ko.mapping is undefined.

如果我手动(仅用于测试)，请更改已编译的.js文件，使其包含映射，如下所示:

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

已定义映射"，但未定义为"ko.mapping"，这是编译器引用它的方式.

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

有什么想法吗?

这是我的配置:

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

推荐答案

听起来像Script#假定ko和ko.mapping在全局命名空间中，而不是作为AMD加载.对BUT，Knockout和Knockout.mapping进行了编码，以使它们在检测到AMD/RequireJS时不使用全局名称空间.

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-在调用require.config之后立即注入(基于下面的评论)，而不是等待实际请求删除或删除的映射

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-创建您自己的包装器模块，以将其重新注入全局.像这样:

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

然后，您可以进行RequireJS映射配置，以便每当您请求'knockout'或'knockout.mapping'时，它们都将透明地重新映射到您的上述包装器中.

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

这篇关于结合使用ScriptSharp和Knockout.Mapping通过RequireJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！