1

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

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

索引.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();
});

应用程序.js

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

    return { init: init };
});

骨干.js

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

我还没有接触到 Backbone 的东西，因为我在当前的设置中遇到了一个错误......

第 150 行：_ 在 _.extend(Backbone.Model.prototype, Backbone.Events, {

我正在努力让这件事尽可能简单，并最终能够添加我的路由器、模型等......并在未来构建这个东西......

我在设置中缺少什么来让这个东西摇摆不定？

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

4

2 回答 2

1

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

Requirejs 的顺序不适用于优先级配置和 CDN 依赖项

简而言之，require 不能与 CDN 资产和 order.js 完美配合——你必须嵌套你的 require 调用（这有点臭）。

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

于 2011-11-08T04:37:17.673 回答
0

在这种情况下，如果你有一个已知的依赖层次结构，你可能想尝试使用shimrequirejs 的功能。由于您知道主干对 jQuery 和 Underscore 有依赖关系，因此您可以相应地填充主干。

在过去，这是我处理这种情况的方式（我还包含了一些示例代码，说明如何通过 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();
});

路由器.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();
        }
    });
});
于 2015-11-17T18:24:21.687 回答