我正在通过backbone.marionette学习backbone，我很难让我的布局正常工作。布局显示，但 CampaginView 未显示该区域的 html。也许我误会了，有人可以解释一下我哪里出了问题吗？
HTML:
<body><div id="holder"></div></body>
HTML 布局:
<script id="portal-layout" type="text/html">
<div id="campaign">I will be replaced with content from campaign view on page load</div>
</script>
HTML 广告系列 View :
<h1>Hello World</h1>
Controller :
define(['App', 'backbone', 'marionette', 'views/LayoutView', 'views/CampaginView'],
function (App, Backbone, Marionette, LayoutView, CampaginView) {
return Backbone.Marionette.Controller.extend({
initialize:function (options) {
//App.headerRegion.show(new HeaderView());
},
//gets mapped to in AppRouter's appRoutes
index:function (options) {
console.log(options)
var layout = new LayoutView();
App.holder.show(layout);
layout.campaign.show(new CampaginView());
}
});
});
布局:
define([ 'marionette',
'handlebars',
'text!templates/layout.html',
'jquery',
'models/CampaginModel',
'collections/CampaignCollection',
],
function (Marionette, Handlebars, template, jquery, CampaginModel, CampaignCollection) {
var LayoutView = Backbone.Marionette.Layout.extend({
template: template,
regions: {
campaign: "#campaign"
}
});
return LayoutView;
});
campaginView:
define([
'jquery',
'underscore',
'backbone',
'models/CampaginModel',
'collections/CampaignCollection',
'text!templates/campaignItem.html',
'backbone_tastypie',
], function($, _, Backbone, CampaginModel,
CampaignCollection, campaignTemplate, backbone_tastypie ){
var campaginView = Backbone.Marionette.ItemView.extend({
template: "#campaign"
}); // end campagin view
return campaginView;
});
最佳答案
在布局 View 中，您需要 HTML 模板并以正确的方式使用它。
define([ 'marionette',
'handlebars',
'**text!templates/layout.html**',
'jquery',
'models/CampaginModel',
'collections/CampaignCollection',
],
function (Marionette, Handlebars, **template**, jquery, CampaginModel, CampaignCollection) {
var LayoutView = Backbone.Marionette.Layout.extend({
template: **template**,
regions: {
campaign: "#campaign"
}
});
return LayoutView;
});
但是您没有在项目 View 中执行相同的操作，因此您需要更改的是使用所需的模板而不是“#campaign”id，如下所示..
define([
'jquery',
'underscore',
'backbone',
'models/CampaginModel',
'collections/CampaignCollection',
'text!templates/campaignItem.html',
'backbone_tastypie',
], function($, _, Backbone, CampaginModel,
CampaignCollection, **campaignTemplate**, backbone_tastypie ){
var campaginView = Backbone.Marionette.ItemView.extend({
template : **campaignTemplate**
// template: "#campaign"
}); // end campagin view
return campaginView;
});
关于javascript - Backbone Marionette 布局 View 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19966089/