Как сделать несколько моделей на одной странице с помощью магистрали и RequireJS

Я разрабатываю одну страницу приложения. Я использую Backbone.js и RequireJS. Проблема в том, что на одной странице я использую 3 разные модели, которые не взаимосвязаны. Но всегда загружает только первое.

page.html

<html><heade></heade><body>
<div id="content">
    <div id="results"></div>
    <div id="collectorTable">
        <!-- the container that gets populated with the index -->
    </div>
    <div id="collectorEdition">
        <!-- the container that gets populated with the edition -->
    </div>
    <div style="margin-top: 10px">
        <div id="terms" style="width: 50%; float: left; height: auto !important; min-height: 100px;">
            <div id="termTable"><!-- Term model index --></div>
            <div id="termEdition"><!-- Term model edition --></div>
        </div>
        <div id="termsCampaign" style="width: 50%; float: left; height: auto !important; min-height: 100px;">
            <div id="termCampaignTable"><!-- TermCampaign model edition --></div>
            <div id="termCampaignEdition"><!-- TermCampaign model edition --></div>
        </div>
    </div>
</div>
<script data-main="js/mainCollector" src="js/libs/require.js"></script>
<script data-main="js/mainTerm" src="js/libs/require.js"></script>
<script data-main="js/mainTermCampaign" src="js/libs/require.js"></script>
</body>
</html>

mainCollector.js

require.config({
    baseUrl: "js",
    paths: {
        html5shiv: "libs/html5shiv",
        jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
        jqueryui: "http://code.jquery.com/ui/1.10.3/jquery-ui",
        tablesorter: "libs/jquery.tablesorter.min",
        script: "script",
        underscore: "libs/underscore.min",
        backbone: "libs/backbone.min",
        utils: "utils",
        //Files Collector
        CollectorModel: "models/CollectorModel",
        CollectorCollection: "collections/CollectorCollection",
        CollectorRouter: "routers/CollectorRouter",
        // Views
        edit: "views/Collector/Collector_edit",
        index: "views/Collector/Collector_index",
        neww: "views/Collector/Collector_new",
        row: "views/Collector/Collector_row",
        show: "views/Collector/Collector_show",
        //Templates
        'templates': 'templates'
    },
    shim: {
        jqueryui: {
            deps: ["jquery"]
        },
        tablesorter: {
            deps: ["jquery"],
            exports: "TableSorter"
        },
        script: {
            deps: ["jquery", "jqueryui", "tablesorter"],
            exports: "Script"
        },
        underscore: {
            exports: "_"
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        }
    }

});

require(["backbone", "underscore", "CollectorCollection", "CollectorRouter", "script"],
    function (Backbone, _, CollectorCollection, CollectorRouter) {
        var Collectors = new CollectorCollection();
        var router = new CollectorRouter({Collectors: Collectors});
        Backbone.history.start();
    });

mainTerm.js

require.config({
    baseUrl: "js",
    paths: {
        html5shiv: "libs/html5shiv",
        jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
        jqueryui: "http://code.jquery.com/ui/1.10.3/jquery-ui",
        tablesorter: "libs/jquery.tablesorter.min",
        script: "script",
        underscore: "libs/underscore.min",
        backbone: "libs/backbone.min",
        utils: "utils",
        //Files Term
        termModel: "models/termModel",
        termCollection: "collections/termCollection",
        termRouter: "routers/termRouter",
        // Views
        ...
        //Templates
        'templates': 'templates'
    },
    shim: {
        ...
    }

});

require(["backbone", "underscore", "termCollection", "termRouter", "script"],
    function (Backbone, _, TermCollection, TermRouter) {
        var terms = new TermCollection();
        var router = new TermRouter({terms: terms});
        Backbone.history.start();
    });

mainTermCampaign.js

require.config({
    baseUrl: "js",
    paths: {
        html5shiv:      "libs/html5shiv",
        jquery:         "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
        jqueryui:       "http://code.jquery.com/ui/1.10.3/jquery-ui",
        tablesorter:    "libs/jquery.tablesorter.min",
        script:     "script",
        underscore: "libs/underscore.min",
        backbone:   "libs/backbone.min",
        utils:      "utils",
        //Files Term Campaign
        termCampaignModel:      "models/termCampaignModel",
        termCampaignCollection: "collections/termCampaignCollection",
        termCampaignRouter:     "routers/termCampaignRouter",
        // Views
        ...
        //Templates
        'templates': 'templates'
    },
    shim: {
        ...
    }

});

require(["backbone", "underscore", "termCampaignCollection", "termCampaignRouter", "script"],
    function (Backbone, _, TermCampaignCollection, TermCampaignRouter) {
        var termsCampaign = new TermCampaignCollection();
        var router = new TermCampaignRouter({termsCampaign: termsCampaign});
        Backbone.history.start();
    });
Источник

2 ответа

Решение

Вы должны иметь только один main.js файл в представлении, так

<script data-main="js/mainCollector" src="js/libs/require.js"></script>
<script data-main="js/mainTerm" src="js/libs/require.js"></script>
<script data-main="js/mainTermCampaign" src="js/libs/require.js"></script>

неправильно, используйте:

<script data-main="js/main" src="js/libs/require.js"></script>

и положить логику в это main.js файл. Вы написали, что mainCollector, mainTerm.js и mainTermCampaign.js похожи. Это означает, что у вас есть три роутера в вашем приложении, что также кажется плохим, я думаю, одного должно быть достаточно. Я думаю, вы должны подумать еще раз, как структурировать свой код.

Вы положили script тег в ваш body, что также необычно, прочитайте документы require.js и попробуйте использовать лучшие практики.

Источник

Решаемая
index.html

<html>
<heade>
<script data-main="js/main" src="js/libs/require.js"></script>
</head>
<body>
.....
</body>
</html>

main.js

require.config({
    baseUrl: "js",
    paths: {
        html5shiv: "libs/html5shiv",
        jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
        jqueryui: "http://code.jquery.com/ui/1.10.3/jquery-ui",
        tablesorter: "libs/jquery.tablesorter.min",
        script: "script",
        underscore: "libs/underscore.min",
        backbone: "libs/backbone.min",
        utils: "helpers/utils",

        //Files  Collector
        CollectorModel: "models/CollectorModel",
        CollectorCollection: "collections/CollectorCollection",

        // Files  Term
        TermModel: "models/TermModel",
        TermCollection: "collections/TermCollection",
        // Files  Term Campaign
        TermCampaignModel:      "models/TermCampaignModel",
        TermCampaignCollection: "collections/TermCampaignCollection",

        // Router
        Router: "routers/Router",

        // Views  Collector
        editCollector: "views/Collector/Collector_edit",
        indexCollector: "views/Collector/Collector_index",
        newCollector: "views/Collector/Collector_new",
        rowCollector: "views/Collector/Collector_row",
        showCollector: "views/Collector/Collector_show",
        //Views  Term
        editTerm: "views/Term/Term_edit",
        indexTerm: "views/Term/Term_index",
        newTerm: "views/Term/Term_new",
        rowTerm: "views/Term/Term_row",
        showTerm: "views/Term/Term_show",
        //Views  Term Campaign
        editTermCampaign:   "views/TermCampaign/TermCampaign_edit",
        indexTermCampaign:  "views/TermCampaign/TermCampaign_index",
        newTermCampaign:   "views/TermCampaign/TermCampaign_new",
        rowTermCampaign:    "views/TermCampaign/TermCampaign_row",
        showTermCampaign:   "views/TermCampaign/TermCampaign_show",

        //Templates
        'templates': 'templates'
    },
    shim: {
        jqueryui: {
            deps: ["jquery"]
        },
        tablesorter: {
            deps: ["jquery"],
            exports: "TableSorter"
        },
        script: {
            deps: ["jquery", "jqueryui", "tablesorter"],
            exports: "Script"
        },
        underscore: {
            exports: "_"
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        }
    }

});

require(["backbone", "underscore", "CollectorCollection", "TermCollection", "TermCampaignCollection", "Router", "script"],
    function (Backbone, _, CollectorCollection, TermCollection, TermCampaignCollection, Router) {
        var Collectors = new CollectorCollection();
        var Terms = new TermCollection();
        var TermsCampaign = new TermCampaignCollection();
        var router = new Router({Collectors: Collectors, Terms: Terms, TermsCampaign: TermsCampaign});
        Backbone.history.start();
    });

router.js

    define([
        "backbone",
        "CollectorModel", "editCollector", "indexCollector", "newCollector", "showCollector",
        "TermModel", "editTerm", "indexTerm", "newTerm", "showTerm",
        "TermCampaignModel", "editTermCampaign", "indexTermCampaign", "newTermCampaign", "showTermCampaign"
    ],
        function(_,
                 CollectorModel,CollectorEditView, CollectorIndexView, CollectorNewView, CollectorShowView,
                 TermModel, TermEditView, TermIndexView, TermNewView, TermShowView,
                 TermCampaignModel, TermCampaignEditView, TermCampaignIndexView, TermCampaignNewView, TermCampaignShowView
        ){
        var Router = Backbone.Router.extend({
            routes: {
                //  Collector
                "Collector/new":        "createCollector",
                "Collectors/index":     "indexCollector",
                "Collector/:id/edit":   "editCollector",
                "Collector/:id/view":   "showCollector",
                //  Term
                "Term/new":             "createTerm",
                "Terms/index":          "indexTerm",
                "Term/:id/edit":        "editTerm",
                "Term/:id/view":        "showTerm",
                //  Term Campaign
                "TermCampaign/new":     "createTermCampaign",
                "TermsCampaign/index":  "indexTermCampaign",
                "TermCampaign/:id/edit": "editTermCampaign",
                "TermCampaign/:id/view": "showTermCampaign"
            },
            // functions ...
    });
    return Router;
});
Источник
Другие вопросы по тегам