Javascript 将模板插入到另一个模板中

我有一个主干木偶项目视图，它是一个父级，有自己的模板。 我有一个子视图，它有一个不同的模板

我希望在某个位置将子模板注入父模板，以便父模板“包装”子模板

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;
        };
    }
);

---

我喜欢只使用继承而不是渲染方法的解决方案，但两者都可以。

我不使用木偶，但概念是一样的

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);
    }
});

下面是我通常使用继承方法处理视图的方式：

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);
    }
});

---

谢谢，我接受了这个概念，并使用了您建议的render方法以及Handlebar将标记注入父对象，然后正确地进行渲染。不是我想要的方式，但效果很好。（我正在寻找一种涉及继承的解决方案，以获取模板并对em执行操作）我更新了答案，向您展示了一种使用视图继承的方法。在示例中，我使用预编译的把手视图。

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);
    }
});