Question

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

这是我的app文件夹结构：

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库的填充选项。

然后是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({

显示错误：“未捕获的TypeError：无法读取未定义的属性'视图'，但我认为这是因为骨干永远不会加载。

< / p>

¿任何人都能说出我在做什么非常错误吗？我整天看代码和几页，我无法弄清楚答案。感谢提前和长期提出的问题，买了我看到很多人都有同样的问题，也许答案也可以帮助其他人。

Answer 1

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

paths: {
  app: 'app', // remove

使用requirejs加载backbonejs和underscorejs时出现问题

1 个答案: