如何使用backbone和RequireJS在同一页面中执行多个模型

时间：2013-07-17 15:07:11

标签： backbone.js requirejs multiple-models

我正在开发一个应用程序单页面。我正在使用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 个答案:

答案 0 :(得分：0)

视图中应该只有一个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 docs并尝试使用最佳做法。

答案 1 :(得分：0)

解决
的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;
});
相关问题
最新问题