如何使用 Require.js 和 Backbone 动态加载 javascript 文件？

Question

在我的应用中，并非所有用户都可以使用相同的模块。所以，我想根据我加载的 json 加载路线。这可行，但我无法初始化 Backbone 中的路由。要加载文件，我使用 Require.js。

为了让一切正常工作，我使用以下代码：

    var initialize = function () {

    //TODO Authentication check
    $.ajax({
        url: '/auth/test@test.com/test'
    });

    moduleNames = new Array();
    appNames = new Array();
    menu = new menuCollection;
    menu.fetch( {
        success: function(collection) {
            collection.each(function(menuitem) {
                moduleNames.push('apps/' + menuitem.attributes.href + '/router');
                appNames.push(menuitem.attributes.href);
            });

//Here something goes wrong
            require(moduleNames, function(appNames) { 
//////////////////
                $.each(appNames, function(i, routerName) {
                    console.log(routerName);
                    objectName = 'router' + routerName.capitalize();
                    console.log(objectName);
                    varname = routerName + '_router';
                    console.log(varname);
                    var varname = this[objectName];
                    console.log(varname);
                });
                var home_router = new routerHome;
                Backbone.history.start();
            });
        }
    });
};

典型的路由器文件如下所示：

// Filename: router.js
define([
'jquery',
'underscore',
'backbone',
'apps/profile/views/info',
'apps/profile/views/contact',
], function ($, _, Backbone, viewInfo, viewContact) {
var routerSilentbob = Backbone.Router.extend({
    routes:{
        // Define some URL routes
        'silentbob':            'showInfo',
        'silentbob/info':       'showInfo',
        'silentbob/contact':    'showContact'
    },
    showInfo:function () {
        alert('testt');
    },
    showContact:function () {
        viewContact.render();
    }
});

return routerSilentbob;
});

这是菜单对象：

[{"uuid":"041e42ee-9649-44d9-8282-5113e64798cf","href":"silentbob","title":"Silent Bob"},{"uuid":"111127aa-fdfc-45e5-978f-46f1d0ea0d89","href":"menu","title":"Menu"},{"uuid":"985574e5-f7ae-4c3f-a304-414b2dc769bb","href":"youtubeengine","title":"Youtube Engine"},{"uuid":"cc84424d-9888-44ef-9895-9c5cce5a999b","href":"cardgamesdk","title":"Cardgame SDK"},{"uuid":"73f4d188-4ec5-4866-84ec-ea0fa5901786","href":"flash2flashvideo","title":"Flash2Flash videotelefonie"},{"uuid":"0702f268-116d-4d62-98e2-8ca74d7ce5f3","href":"appstore","title":"Menu"},{"uuid":"2f8606e3-b81d-43bc-a764-a0811e402c6d","href":"me","title":"Mijn profiel"},{"uuid":"bb1acae2-a6c7-404c-861c-b8a838a19614","href":"contacts","title":"Contacten"},{"uuid":"9b6e6022-fe01-40ab-b8fb-df70d31c3b28","href":"messaging","title":"Berichten"},{"uuid":"29489359-3685-4b77-9faa-6c9f63e5fe09","href":"calendar","title":"Kalender"},{"uuid":"1c9541ff-2a25-40ca-b382-3c953d440f35","href":"cubigotv","title":"Cubigo TV"},{"uuid":"5b7af683-941b-45d7-bfae-9a9e12bb09c0","href":"links","title":"Websites"},{"uuid":"27efca4c-2b64-455d-8622-367f0f13d516","href":"ideabox","title":"Idee\u00ebn"},{"uuid":"84d2c2ea-7ce7-413e-963f-7b729590b5d9","href":"companyguide","title":"Bedrijven"},{"uuid":"2a61899f-d9de-478e-a03c-64a5fd6214d7","href":"associations","title":"Verenigingen"},{"uuid":"0cf05900-cee7-4f2e-87ae-7967315c2b93","href":"myneighbourhood","title":"Mijn buurt"},{"uuid":"01ae757b-d6a3-4ab0-98cb-a741572122bf","href":"htmlwebsite","title":"HtmlWebsite"}]

所以，我找不到正确的方法来获取路由器的对象并将它们加载到 Backbone。 有没有一种方法不需要变量作为函数的参数？ 或者我可以加载不同的内容吗？

Answer 1

让“路由器”模块返回传递给Backbone.Router.Extend()的对象字面量

define([], function () {
    return {
        // Router Definition here
    }
})

然后像这样创建一个路由器模块：

define(arrayOfModulePaths, function () { 

    return {
        listen: function(module) {
            var Router = Backbone.Router.Extend(arguments[module]);
            var router = new Router();
            Backbone.history.start();
        }
    }
})

然后您可以简单地要求路由器模块并将模块索引传递给router.listen()

Answer 2

 require(moduleNames, function() { 
    var routerObjs = {};

                    $.each(arguments, function(i, CustomRoute) {
                        var routerName = appNames[i];
                        routerObjs['router' + routerName.capitalize()] = CustomRoute;
                    });
                    var home_router = new routerObjs.routerHome;
                    Backbone.history.start();
                });