Javascript Require.js模块路径范围问题

我不明白为什么我的视图模块（overlay.screen.view.js）在发出警报时要求变量未定义（UncaughtTypeError:无法调用undefined的方法“template”）。路径看起来是正确的，但很明显有些地方出了问题。我做错了什么？提前谢谢

以下是我的目录结构：

www
 |-js
   |-app
     consumer.activity.js
     |-views
       overlay.screen.view.js
   |-test
   |-vendor
     |-backbone
     |-fastclick
     |-jquery
     |-sinon
     |-superslides
     |-underscore

在我的consumer.activity.js文件（基本上是main.js）中：

以下是视图模块overlay.screen.view.js：

define( function( require ) {

    "use strict";

    var  $               = require('jquery'),
         _               = require('../../vendor/underscore/underscore-1.5.2-min'),
         Backbone        = require('../../vendor/backbone/backbone-1.1.0-min'),
         tmpl            = require('text!app/tmpl/overlayscreen.html'),
         template        = _.template(tmpl);  // // Uncaught TypeError: Cannot call method 'template' of undefined .

    alert($);
    alert(_);
    alert(Backbone);
    alert(template());

    return Backbone.View.extend({

        render: function() {

            this.$el.append(template());
            return this;

        },

        show: function( heightInPixels, widthInPixels ) {

            this.$('#overlayscreen').css('height', heightInPixels);
            this.$('#overlayscreen').css('width', widthInPixels);
            this.$('#overlayscreen').removeClass('hide');

        },

        hide: function() {

            this.$el.addClass('hide');

        }

    });

});

更新：

Seddass在下面的帖子引导我找到以下解决方案。本质上，我需要更新require.config（）路径，以便垫片按预期工作。代码如下：

require.config({
    baseUrl: '../../js',
    paths: {
        root: '..',
        jquery: 'vendor/jquery/jquery.2.0.3.min',
        underscore: 'vendor/underscore/underscore-1.5.2-min',
        backbone: 'vendor/backbone/backbone-1.1.0-min',
        test: 'test'
    },

    shim: {
        'jquery': {
            exports: '$'
        },
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        },
        'fastclick': {
            exports: 'FastClick'
        },
        'phonegap': {
            exports: 'phonegap'
        },
        'cordova': {
            exports: 'cordova'
        },
        'sinon': {
            exports: 'sinon'
        }
    }
});

require([
    'root/phonegap',
    'jquery',
    'underscore',
    'backbone',
    'vendor/fastclick/fastclick-0.6.11-min',
    'app/lib/xcelarys.app',

    // Views
    'app/views/overlay.screen.view',
    'app/views/global.header.1.view',

    // Models
    'app/models/global.header.1.models'
    ],
    function(
        phonegap,
        $,
        _,
        Backbone,
        FastClick,
        appConfig,
        ScreenOverlayView,
        GlobalHeader1,
        GlobalHeader1Model
    ) {
        "use strict";
        // code
    }
});

现在我可以访问模块中的libs了

define( function( require ) {
    "use strict";
    var  $               = require('jquery'),
         _               = require('underscore'),
         Backbone        = require('backbone'),
         tmpl            = require('text!app/tmpl/overlayscreen.html'),
         template        = _.template(tmpl);

    alert('overlay.screen#jquery = ' + $);
    alert('overlay.screen#underscore = ' + _);
    alert('overlay.screen#backbone = ' + Backbone);
    alert('overlay.screen#template' + template());

    // Code here!
});

---

问题是，到那时，它已经到达了exec

template        = _.template(tmpl);

下划线可能未完全加载。异步模块定义（AMD）中有“异步”的意思。您需要将代码重新构造为如下所示，以使其正常工作：

require(['underscore', 'text!app/tmpl/overlayscreen.html'], function (_, tmpl) {
    template        = _.template(tmpl);
    console.log (template);

});

您还可以查看中的示例

已更新

在中使用JSFIDLE模拟您的情况。 由于您已经在config对象中定义了所有模块，所以您可以在“sugar”版本中使用模块名称，如下所示，它应该可以工作

var  $               = require('jquery'),
     _               = require('underscore'),
    Backbone         = require('backbone');

---

我猜您的underline.js版本没有启用AMD，所以您在配置中使用了垫片。 但我相信在打电话的时候

require('../../vendor/underscore/underscore-1.5.2-min');

您的垫片无法识别您正在调用“下划线”以启用“\”的导出。 您是否尝试在路径、垫片设置和以后的设置中设置下划线，以要求其具有相同的路径

换言之：

require.config({
    ...
    paths: {
        'underscore' : '../../vendor/underscore/underscore-1.5.2-min',
        ....
    },
    shim: {
        'underscore' : {
             exports: '_'
        }
    }
});

在您的视图中（或在任何AMD js文件中）：

---

应该有用

谢谢你，明。有几件事：1。我熟悉JS的异步特性。2.您提供的上述解决方案不起作用。3.我使用了一种称为语法糖（）的方法，它消除了依赖项数组（在后台转换）的冗长性。4.overlay.screen.view.js文件中的路径或加载似乎仍然存在问题。提供了使用JSFIDLE的模拟解决方案。请让我知道，如果这有助于你的情况。

require.config({
    ...
    paths: {
        'underscore' : '../../vendor/underscore/underscore-1.5.2-min',
        ....
    },
    shim: {
        'underscore' : {
             exports: '_'
        }
    }
});

var _ = require('underscore');