0
我正在開發一個應用程序單頁。我使用Backbone.js和RequireJS。 問題是，在一頁上我使用3個不相關的不同模型。但總是隻加載第一個。如何使用主幹和RequireJS在同一頁面中執行多個模型
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();
});