如何使用Require.js和Backbone动态加载JavaScript文件?

时间:2012-05-29 13:48:44

标签: javascript backbone.js requirejs

在我的应用中,并非所有用户都拥有相同的模块。所以,我想基于我加载的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中。 有没有办法我不需要变量作为我的函数的参数? 或者我可以加载它吗?

2 个答案:

答案 0 :(得分:1)

让“router”模块返回传递给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()

答案 1 :(得分:0)

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