javascript - RequireJS 不起作用!(未捕获类型错误 : Cannot call method 'replace' of undefined)

Question

我遇到了这个问题:

Uncaught TypeError: Cannot call method 'replace' of undefined underscore.js:5
j.template underscore.js:5
Backbone.View.extend.render LoginView.js:13
Backbone.Router.extend.index routes.js:24
i.extend.execute backbone.js:1
(anonymous function) backbone.js:1
(anonymous function) backbone.js:1
j.some.j.any underscore.js:5
i.extend.loadUrl backbone.js:1
i.extend.start backbone.js:1
_public.start application.js:18
(anonymous function) main.js:32
i.execCb require.js:29
$.check require.js:18
(anonymous function) require.js:23
(anonymous function) require.js:8
(anonymous function) require.js:23
v require.js:7
$.emit require.js:23
$.check require.js:19
(anonymous function) require.js:23
(anonymous function) require.js:8
(anonymous function) require.js:23
v require.js:7
$.emit require.js:23
$.check require.js:19
(anonymous function) require.js:23
(anonymous function) require.js:8
(anonymous function) require.js:23
v require.js:7
$.emit require.js:23
$.check require.js:19
(anonymous function) require.js:23
(anonymous function) require.js:8
(anonymous function) require.js:23
v require.js:7
$.emit require.js:23
$.check require.js:19
(anonymous function) require.js:23
(anonymous function) require.js:8
(anonymous function) require.js:23
v require.js:7
$.emit require.js:23
$.check require.js:19
$.enable require.js:23
$.init require.js:17
E require.js:14
i.completeLoad require.js:28
i.onScriptLoad require.js:29

当我将模板分成不同的文件时。这是我的项目结构:

`-- [    548,855] .
   |-- [    375,907] js
   |  |-- [     26,085] pages
   |  |  `-- [     26,085] RestaurantPage
   |  |     |-- [      3,595] script.js
   |  |     |-- [     15,816] templates
   |  |     |  |-- [      1,009] LoginTemplate.html
   |  |     |  |-- [      2,335] edit_order.html
   |  |     |  |-- [      3,604] AdminTemplate.html
   |  |     |  |-- [      2,242] WaiterTemplate.html
   |  |     |  |-- [      2,076] orders.html
   |  |     |  |-- [          0] README
   |  |     |  `-- [      4,550] CookerTemplate.html
   |  |     |-- [      1,023] routers
   |  |     |  |-- [      1,023] routes.js
   |  |     |  `-- [          0] README
   |  |     |-- [        436] models
   |  |     |  |-- [          0] model_orders.js
   |  |     |  |-- [          0] model_edit_order.js
   |  |     |  |-- [          0] README
   |  |     |  `-- [        436] User.js
   |  |     |-- [      4,786] views
   |  |     |  |-- [      1,345] orders.js
   |  |     |  |-- [        450] WaiterView.js
   |  |     |  |-- [      1,553] AdminView.js
   |  |     |  |-- [        546] LoginView.js
   |  |     |  |-- [          0] edit_order.js
   |  |     |  |-- [          0] README
   |  |     |  `-- [        892] CookerView.js
   |  |     `-- [        429] collections
   |  |        |-- [        103] dishescollection.js
   |  |        |-- [          0] collections_orders.js
   |  |        |-- [          0] README
   |  |        |-- [        111] categoriescollection.js
   |  |        |-- [          0] collections_edit_order.js
   |  |        `-- [        215] UsersCollection.js
   |  |-- [        834] main.js
   |  |-- [        518] application.js
   |  `-- [    348,470] libs
   |     |-- [     14,682] underscorejs
   |     |  `-- [     14,682] underscore.js
   |     |-- [    282,944] jquery
   |     |  `-- [    282,944] jquery.js
   |     |-- [     30,845] requirejs
   |     |  |-- [     15,234] require.js
   |     |  `-- [     15,611] text.js
   |     `-- [     19,999] backbonejs
   |        `-- [     19,999] backbone.js
   `-- [    172,948] css
      |-- [    172,806] gumby.css
      `-- [        142] style.css

这是代码:main.js

'use strict';

require.config({
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        }
    },
    paths: {
        jquery: 'libs/jquery/jquery',
        backbone: 'libs/backbonejs/backbone',
        underscore: 'libs/underscorejs/underscore',
        text: 'libs/requirejs/text',
        templates: 'pages/RestaurantPage/templates',
        views: 'pages/RestaurantPage/views',
        collections: 'pages/RestaurantPage/collections',
        models: 'pages/RestaurantPage/models',
        routers: 'pages/RestaurantPage/routers',
        application: 'application'
    }
});

require(["application"],
    function(application) {
        application.start();
    }
);

application.js

define([
        "pages/RestaurantPage/routers/routes"
        //"pages/RestaurantPage/collections/UsersCollection"
        //"pages/RestaurantPage/models/User"
    ],

    function(routes, User) {
        var _public = {};
        var _private = {};

        _private.init = function() {
            // user = new User();
            router = new routes();
        };

        _public.start = function() {
            _private.init();
            Backbone.history.start();
        };

        return _public;
    }
);

LoginView.js

define([
        "underscore",
        "backbone",
        "jquery",
        "text!pages/RestaurantPage/templates/LoginTemplate.html"
    ],
    function(_, Backbone, $, LoginTemplate) {
        return Backbone.View.extend({
            //model: LoginModel,
            el: '#content',
            render: function() {
                var that = this;
                var template = _.template($('#loginpage').html());
                that.$el.html(template);
                //router.navigate('admin', true); 
            }
        });
    }

);

routes.js

define([

        "pages/RestaurantPage/views/LoginView",
        "pages/RestaurantPage/views/AdminView",
        "pages/RestaurantPage/views/CookerView",
        "pages/RestaurantPage/views/WaiterView"
    ],

    function(LoginView, AdminView, CookerView, WaiterView) {
        return Backbone.Router.extend({


            routes: {
                "": "index",
                "admin": "admin",
                "cooker": "cooker",
                "waiter": "waiter"
            },


            index: function() {
                loginView = new LoginView;

                loginView.render();
            },
            admin: function() {
                adminView = new AdminView;

                adminView.render();
            },

            cooker: function() {
                cookerView = new CookerView;

                cookerView.render();
            },

            waiter: function() {
                waiterView = new WaiterView;
                waiterView.render();

            }
        });
    }); 

所有 View 都有相同的结构......那么问题是什么？

更新更改代码后如下:

define([
        "underscore",
        "backbone",
        "jquery",

        "text!pages/RestaurantPage/templates/LoginTemplate.html"
    ],
    function(_, Backbone, $, Template) {
        return Backbone.View.extend({
            template: _.template(Template),
            el: '#content',
            render: function() {
                this.$el.html(this.template());
                return this;
                //router.navigate('admin', true); 
            }
        });
    }

);

错误消失了...但没有任何渲染!这让我很生气:)

Answer 1

尝试像这样反转您的配置声明:

require.config({
    paths: {
        jquery: 'libs/jquery/jquery',
        backbone: 'libs/backbonejs/backbone',
        underscore: 'libs/underscorejs/underscore',
        text: 'libs/requirejs/text',
        templates: 'pages/RestaurantPage/templates',
        views: 'pages/RestaurantPage/views',
        collections: 'pages/RestaurantPage/collections',
        models: 'pages/RestaurantPage/models',
        routers: 'pages/RestaurantPage/routers',
        application: 'application'
    },
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        }
    }
});