gpt4 book ai didi

javascript - Backbone Marionette 布局 View 无法正常工作

转载 作者:行者123 更新时间:2023-12-02 18:07:38 24 4
gpt4 key购买 nike

我正在通过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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com