вставляем шаблон в другой шаблон

Question

У меня есть манекен-марионетка 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); 
    } 
});