CODEWITHSUNDEEP
javascripttemplatesbackbone.jshandlebars.js
SoluableNonagon
SoluableNonagon

Reputation: 11755

inject a template into another template

I have a Backbone Marionette ItemView which is a parent and has it's own template. I have a child of that view which has a different template.

I would like to have the child template injected into the parent template at a certain location, so that the parent "wraps" the child.

define( ['backbone', 'marionette', 'jquery', 'hbs!templates/partials/parentContents' ],
    function(Backbone, Marionette, $, template) {
    "use strict";

        var ParentView = Backbone.Marionette.ItemView.extend({
            template: template,
            /* // contents of parent template
            <div class="parent">
                <div class="parent-head"></div>
                <div class="parent-body"></div>
            </div>
            */
            events: {
                "click .something": "doSomething"
            },
            initialize:  function(){
                var self = this;
                // some initialization code
            }
        }); 

        // extend events to child class
        ParentView.extend = function(child) {
            var view = Backbone.Marionette.ItemView.extend.apply(this, arguments);
            view.prototype.events = _.extend({}, this.prototype.events, child.events);
            return view;
        };
    }
);

Child:

define(['jquery', 'hbs!templates/childView', 'backbone', 'views/cards/CardView'],
    function ($, template, Backbone, ParentView) {
        "use strict";

        return ParentView.extend({

            initialize: function(){
                var self = this;
                // do some other stuff
            },

            template: ????,  // I want to get the parent's template and inject this template into it at "parent-body"

            events: {
                'keypress #something': 'doSomethingElse'
            }

        });
    }
);

I'd love a solution that just uses inheritance rather than the render method, but either is fine.

Upvotes: 2

Views: 378

Answers (1)

tribe84
tribe84

Reputation: 5632

I don't use Marionette but the concept will be the same.

var ChildView = Backbone.View.extend({
    tagName: "div",
    render: function () {
        var that = this;
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});


var MasterView = Backbone.View.extend({
    el: "#master-element",
    render: function () {
        var $el = this.$el.find("#child-holder");
        var view = new ChildView({model: something});
        $el.html(view.render().$el);
    }
});

Below is how I typically approach views with inheritance: 

var RootView = Backbone.View.extend({
    template: function(data){
        return JST[this.templateName](data);
    },
    tagName: "div",
    render: function () {
        var that = this;
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }   
});


var ChildView = RootView.extend({
    templateName: "child-view",
    tagName: "div"
});


var MasterView = RootView.extend({
    el: "#master-element",
    templateName: "master-view",
    render: function () {
        RootView.prototype.render.apply(this, arguments);
        var $el = this.$el.find("#child-holder");
        var view = new ChildView({model: something});
        $el.html(view.render().$el);
    }
});

Upvotes: 2

Related Questions