CODEWITHSUNDEEP
javascriptjquerybackbone.jsmarionette
Prometheus
Prometheus

Reputation: 33655

Backbone Marionette Layout View Not working correctly

I'm learning backbone via backbone.marionette I'm having difficulty getting my layout to work. Layout shows but CampaginView does not show it's html into the region. Maybe I'm misunderstanding could someone explain where I'm going wrong?

HTML:

<body><div id="holder"></div></body>

HTML Layout:

<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 Campaign 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());

        }
    });
});

Layout:

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;


    });

Upvotes: 0

Views: 1066

Answers (1)

Rayweb_on
Rayweb_on

Reputation: 3727

in your layout view, you are requiring your HTML template and using it in the right way.

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;


});

but you are not doing the same in your item view, so what you need to change is to use the template required not the '#campaign' id, like this..

 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;


});

Upvotes: 2

Related Questions