1

我在 RequireJS 中使用 shim 选项加载这个库时遇到问题（可能是因为我对该库的背景不好）。我尝试查看文档并查看其他页面，但问题仍然存在。

这是我的应用程序文件夹结构：

index.html
js/main.js
js/app/router.js
js/app/app.js
js/views/homeview.js
js/libs/backbone/backbone-1.0.0.js
js/libs/underscore/underscore-1.5.1.js
js/libs/jquery/jquery-1.10.2.js
js/libs/require/require-2.1.8.js

一切都从 index.html 开始：

    <!DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>App</title>
    </head>
    <body>
        <div class="page">
            Loading...
        </div>
        <script data-main="js/main" src="js/libs/require/require-2.1.8.js"></script>
    </body>
</html>

加载 main.js

require.config({
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
    },
    paths: {
        app:        'app',
        mod:        'app/mods',
        backbone:   'libs/backbone/backbone-1.0.0',
        underscore: 'libs/underscore/underscore-1.5.1',
        jquery:     'libs/jquery/jquery-1.10.2',  
    },
});

require([
    'app/app',
], function (App) {
    App.initialize();
});

这定义了库的路径和非 AMD 库的 shim 选项。

然后是 app.js

define([
        'app/router',
], function(Router) {
    var initialize = function() {
        //var router = new Router();
        //router.initialize();
            Router.initialize();
    };

    return {
        initialize: initialize,
    };
});

然后router.js：

define([
        'jquery',
        'underscore',
        'backbone',
        'app/views/homeview',
], function($, _, Backbone, HomeView) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            '': 'home',
        }
    });

    var initialize = function() {
        var appRouter = new AppRouter();
        var homeView = new HomeView();

        appRouter.on('route:home', function() {
            userListView.render();
            console.log('We have loaded the home page.');
        });

        Backbone.history.start();
    };

    return {
        initialize: initialize,     
    };
});

现在在这里我遇到了一个问题，因为在 chrome 开发人员工具中查看网络选项卡仅加载 jquery，也没有主干或下划线。

然后，最后，因为它定义了对视图的引用，所以加载 homeview.js

define([
        'jquery',
        'underscore',
        'backbone',
        'libs/text!app/tpl/home.html',
], function($, _, Backbone, HomeTpl) {
    var homeView = Backbone.View.extend({
        el: '.page',
        render: function() {
            //var self = this;
            //users.fetch({
            //  success: function() {
                    var template = _.template(HomeTpl, {});
                    //self.$el.html(template);                  
                    this.$el.html(template);
            //  }
            //});
        },
    }); 

    return homeView;
});

和问题，因为在线

var homeView = Backbone.View.extend({
显示错误：“未捕获的类型错误：无法读取未定义的属性'视图'”，但我认为这是因为骨干永远不会加载。

¿ 谁能告诉我我做错了什么？我整天都在看代码和几页，但我无法找出答案。提前感谢并为这个长问题道歉，购买我已经看到很多人遇到同样的问题，也许答案也可以帮助其他人。

4

1 回答 1

0

找不到任何错误，但您不需要在路径中加载应用程序模块

paths: {
  app: 'app', // remove
于 2013-07-25T17:09:34.977 回答