将一个模板注入另一个模板

Question

我有一个 Backbone Marionette ItemView，它是父级并且有它自己的模板。 我有一个具有不同模板的视图的子视图。

我想让子模板在某个位置注入父模板，以便父模板“包裹”子模板。

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

孩子：

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'
            }

        });
    }
);

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

Answer 1

我不使用 Marionette，但概念是一样的。

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