如何使用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(); 
       });