two templates instantiated and put together

maintemplate.html

<div id="mainTemplate">
  <div id="contentOne">Content One</div>
  <div id="contentTwo"> {{ somevar }} </div>
  <div id="contentThree"></div>
</div>

template_one.html

<em>This Goes to Content Three {{someothervar }}</em> 

template_two.html

<strong>{{differentvar }}</strong> 

view.js

//Of course all of this is abbreviated
define([
  'text!resources/maintemplate.html',
  'text!resources/template_one.html',
  'text!resources/template_two.html'
  ], function(MainTemplate, TemplateA, TemplateB) {

  var Someview = Backbone.View.extend({
    initialize: function() {
      this.subtemplate = function() { 
        //some logic to determine template
        //return TemplateA, or TemplateB ...
      }
      
      this.render();
    },
    
    render: function() {
      /* we are instantiating both templates so that the data that
      * must go in each gets processed. Then when we sew the two together
      * we are sewing to "finished products".  If we don't the jQuery lookup
      * of the #contentThree id won't work
      */
      
      //instantiate the main template
      var body = _.template(MainTemplate, this.model.toJSON() );
      //instantiate the second template
      var subtemp = _.template(this.subTemplate, {somedate: dataObj});
      
      //connect the dots.  This should go to the appropriate spot
      $(body).find('#contentThree').html( $(subtemp).html() );
      
      //insert into DOM
      this.$el.html(body);
    }
  });
  
  return Someview;
});