Question

我想使用Requirejs来运行Backbonejs应用程序。这是我的基本设置。

根/
根/ index.htm的
根/脚本/
根/脚本/需要-的jquery.js
根/脚本/ order.js
根/脚本/ main.js
根/脚本/ app.js
根/脚本/ app.build.js
root / scripts / backbone.js

的index.htm

<script data-main="scripts/main" src="scripts/require-jquery.js"></script>
<div id="home"></div>

main.js

require([
    "order!http://documentcloud.github.com/underscore/underscore.js",
    "order!backbone",
    "order!app"
    ],function(_,Backbone,app){
    app.init();
});

app.js

define(["jquery","underscore"],function($,_){
    var init = function(){
        var arr = ['orange','apple','bannana'];
        _.each(arr,function(fruit){
            console.log(fruit);
        });
    };

    return { init: init };
});

Backbone.js的

define(["order!http://documentcloud.github.com/backbone/backbone.js"], 
    function(){
        return Backbone;
});

我还没有得到Backbone的东西，因为我遇到了这个当前设置的错误......

第150行：在_.extend处未定义_（Backbone.Model.prototype，Backbone.Events，{

我正在努力使这个事情变得尽可能简单，最终能够添加我的路由器，模型等......然后在路上构建它......

在我的设置中，我为什么会让这个东西摇摆不定？

此外，以任何方式使用本地js文件而不是尝试从CDN加载东西会更好吗？

Answer 1

以下内容可能会有所帮助：

Requirejs' order does not work with priority config and CDN dependencies

简而言之，要求与CDN资产和order.js完美配合 - 你必须嵌套你的需求电话（有点臭）。

通常情况下，我使用了骨干和下划线的本地副本，并且它们与order!插件配合良好

Answer 2

在这种情况下，如果您有已知的依赖关系，则可能需要尝试使用requirejs的shim功能。既然你知道主干具有jQuery和Underscore的依赖关系，那么就可以相应地对主干进行shim。

过去在这里我是如何处理这种情况的（我还提供了一些关于如何通过CDN加载依赖关系的示例代码和本地回退，你可以使用一个bower目录如果你选择）。我建议您确保使用requirejs捆绑资源（节省时间并提高性能）：

main.js

requirejs.config({
    baseUrl: 'vendor',
    paths: {
        data:       '../data',
        tmpl:       './tmpl',
        views:      '../views',
        router:     '../router',
        jquery:     ['//yourCDNhere.tld/jquery/jquery.min', './jquery/jquery-2.0.0.min'],
        backbone:   ['//yourCDNhere.tld/backbone/backbone.min', './backbone/backbone.min'],
        etc...
    },
    deps: ['router'],
    shim: {
        'backbone': {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        'jquery': {
            exports: '$'
        },
        'underscore': {
            exports: '_'
        }
    }
});

require(['jquery', 'underscore', 'backbone', 'router'], function( $, _, Backbone, Router ) {
    var router = new Router();
    Backbone.history.start();
});

router.js

define( function( require ) {
    var Backbone = require( 'backbone' );
    var DashboardView = require( 'views/dashboard' );

    return Backbone.Router.extend({
        // Define some basic routes
        routes: {
            '': 'renderDashboard'
        },

        // Initialize the router
        initialize: function() {
            _.bindAll( this );

            return this;
        },

        renderDashboard: function(){
            var dashboardView = new DashboardView();
        }
    });
});

需要Backbonejs应用程序

2 个答案:

main.js

router.js