Question

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


    });

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;


    });

Answer 1

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


});

Backbone Marionette布局视图无法正常工作

1 个答案: