Requirejs для приложения Backbonejs - PullRequest
Новая
       2

Requirejs для приложения Backbonejs

1 голос
/ 07 ноября 2011

Я хочу использовать 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
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?

Ответы [ 2 ]

1 голос
/ 08 ноября 2011

Может быть полезно следующее:

Порядок Requirejs не работает с приоритетами config и зависимостями CDN

Короче говоря, require не работает идеально с активами CDN и order.js - вы должны вкладывать ваши требуемые вызовы (что воняет).

Обычно я использовал локальные копии основы и подчеркивания, и они хорошо работали с плагином order!

0 голосов
/ 17 ноября 2015

В подобных случаях, когда у вас есть известная иерархия зависимостей, вы можете попробовать использовать shim функциональность requirejs.Поскольку вы знаете, что у backbone есть зависимости для jQuery и Underscore, вы соответствующим образом подбираете backbone.

В прошлом вот как я справлялся с этой ситуацией (я также включил пример кода о том, как загружать ваши зависимости через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();
        }
    });
});
...