0

我正在通过backbone.marionette 学习主干我很难让我的布局正常工作。布局显示，但 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 广告系列视图：

<h1>Hello World</h1>

控制器：

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;


    });

活动视图：

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;


    });
4

1 回答 1

2

在您的布局视图中，您需要 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;


});

但是您在项目视图中没有做同样的事情，所以您需要更改的是使用所需的模板而不是“#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;


});
于 2013-11-13T23:07:39.673 回答