设置多页RequireJS时出现问题

Trouble Setting up Multipage RequireJS

本文关键字：问题 RequireJS 设置      更新时间：2023-09-26

我正试图按照此处的说明在多页项目中使用RequireJS：https://github.com/requirejs/example-multipage

我有一个主页.html…

<html>
  <head>
    <script src="/components/require/require.js"></script>
    <script>
        require([ "/common.js" ], function ( common ) {
            require([ "/app/views/main.js" ]);
        });
    </script>
  </head>
  <body />
</html>

我有一个模块main.js…

define(function( require ) {
    var $ = require( "jquery" );
    var _ = require( "underscore" );
    var Backbone = require( "backbone" );
    $(function() {
        var MainView = Backbone.View.extend({
            initialize: function() {
                alert( "hah!" );
            }
        });
        new MainView();
    });
});

此代码执行良好。到目前为止还不错。我遇到的问题是，当我试图从主视图中要求另一个子视图时。

所以如果我更改main.js…

define(function( require ) {
    var $ = require( "jquery" );
    var _ = require( "underscore" );
    var Backbone = require( "backbone" );
    var SubView = require( "/app/views/subview" );
    $(function() {
        var MainView = Backbone.View.extend({
            initialize: function() {
                this.subView = new SubView();
            }
        });
        new MainView();
    });
});

如果我添加一个子视图.js…

define(function( require ) {
    var $ = require( "jquery" );
    var _ = require( "underscore" );
    var Backbone = require( "backbone" );
    $(function() {
        var SubView = Backbone.View.extend({
            initialize: function() {
                alert( "SubView Hah!" );
            }
        });
        return SubView;
    });
});

突然requirejs返回一个错误："require.js:8错误：views/subview.js的脚本错误"

根据RequireJS文档，此错误通常由语法错误/打字错误触发(http://requirejs.org/docs/errors.html#scripterror)。然而，我不认为这是我的问题。

有人知道我做错了什么吗？

当前在您的main.js中，SubView是undefined，这是因为您的子视图没有返回任何内容。

子视图

define(function(require)
{
    // These 2 require calls are not needed since they are not "required" for this module.
    //var $ = require( "jquery" );
    //var _ = require( "underscore" );
    var Backbone = require("backbone");
    return Backbone.View.extend({
        initialize: function()
        {
            alert( "SubView Hah!" );
        }
    });
});
相关文章：