使用 Backbone widh requireJS 加载 JS 时出错答案

【问题标题】：Error loading JS using Backbone widh requireJS使用 Backbone widh requireJS 加载 JS 时出错
【发布时间】：2013-09-23 11:50:16
【问题描述】：

我在使用 RequireJS 和 Backbone 加载 javascript 文件时出错。

CodeIgniter 配置.php

$config['index_page'] = '';

home.php

<script data-main="<?php echo site_url('js/main.js')?>" src="<?php echo site_url('js/libs/require.js')?>"></script>

main.js

require.config({
    baseUrl: "js",
    paths: {
        html5shiv: "libs/html5shiv",
        jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
        jqueryui: "http://code.jquery.com/ui/1.10.3/jquery-ui",
        bootstrap: "libs/bootstrap.min",
        tablesorter: "libs/jquery.tablesorter.min",
        script: "script",
        underscore: "libs/underscore.min",
        backbone: "libs/backbone.min",
        utils: "helpers/utils",
        accountModel: "models/accountModel",
        accountCollection: "collections/accountCollection",
        accountRouter: "routers/accountRouter",
        // Views
        edit: "views/account/account_edit",
        index: "views/account/account_index",
        row: "views/account/account_row",
        //Templates
        'templates': 'templates'
    },
    shim: {
        jqueryui: {
            deps: ["jquery"],
            exports: "Jqueryui"
        },
        tablesorter: {
            deps: ["jquery"],
            exports: "TableSorter"
        },
        bootstrap: {
            deps: ["jquery"] ,
            exports: "Bootstrap"
        },
        script: {
            deps: ["jquery", "tablesorter", "jqueryui"],
            exports: "Script"
        },
        underscore: {
            exports: "_"
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        }
    }

});

require(["backbone", "underscore", "accountCollection", "accountRouter","bootstrap", "script"],
    function (Backbone, _, AccountCollection, AccountRouter) {
        var accounts = new AccountCollection();
        var router = new AccountRouter({accounts: accounts});
        Backbone.history.start();
    });

未加载的文件有：

http://localhost/project/index.php/js/collections/accountCollection.js
http://localhost/project/index.php/js/routers/accountRouter.js
http://localhost/project/index.php/js/libs/underscore.min.js
http://localhost/project/index.php/js/libs/bootstrap.min.js
http://localhost/project/index.php/js/libs/jquery.tablesorter.min.js

萤火虫返回：404 Not Found http://localhost/project/index.php/js/collections/accountCollection.js

在我不使用 Backbone 的其他页面中，RequireJS 工作正常，加载 js 的 url 没有 index.php

如果我将 main.js 更改为：

require.config({
    baseUrl: "js",
    paths: {
        html5shiv: "http://localhost/project/js/libs/html5shiv",
        jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
        jqueryui: "http://code.jquery.com/ui/1.10.3/jquery-ui",
        bootstrap: "http://localhost/project/js/libs/bootstrap.min",
        tablesorter: "http://localhost/project/js/libs/jquery.tablesorter.min",
        script: "http://localhost/project/js/scripts/script",
        underscore: "http://localhost/project/js/libs/underscore.min",
        backbone: "http://localhost/project/js/libs/backbone.min",
        utils: "http://localhost/project/js/helpers/utils",
        //Files Facebook Collector
        accountModel: "http://localhost/project/js/models/accountModel",
        accountCollection: "http://localhost/project/js/collections/accountCollection",
        accountRouter: "http://localhost/project/js/routers/accountRouter",
        // Views
        edit: "http://localhost/project/js/views/account/account_edit",
        index: "http://localhost/project/js/views/account/account_index",
        row: "http://localhost/project/js/views/account/account_row",
        //Templates
        'templates': 'templates'
    },
    shim: {
        jqueryui: {
            deps: ["jquery"],
            exports: "Jqueryui"
        },
        tablesorter: {
            deps: ["jquery"],
            exports: "TableSorter"
        },
        bootstrap: {
            deps: ["jquery"] ,
            exports: "Bootstrap"
        },
        script: {
            deps: ["jquery", "tablesorter", "jqueryui"],
            exports: "Script"
        },
        underscore: {
            exports: "_"
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        }
    }

});

仅不加载：http://localhost/project/index.php/js/text.js（用于加载模板）。

require(["backbone", "underscore", "accountCollection", "accountRouter","bootstrap", "script"],
    function (Backbone, _, AccountCollection, AccountRouter) {
        var accounts = new AccountCollection();
        var router = new AccountRouter({accounts: accounts});
        Backbone.history.start();
    });

谢谢。

【问题讨论】：

你试过绝对路径作为 baseUrl 吗？如：“/project/js”

标签： javascript jquery codeigniter backbone.js requirejs

【解决方案1】：

baseUrl: "js",

感谢乔纳斯·盖雷加特

【讨论】：