javascript - 将一个模板注入(inject)另一个模板

Question

我有一个 Backbone Marionette ItemView，它是父项并且有自己的模板。我有一个具有不同模板的 View 的 subview 。

我想在某个位置将子模板注入(inject)到父模板中，以便父模板“包裹”子模板。

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

        });
    }
);

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

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

下面是我通常如何处理带有继承的 View :

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