title: How can I inherit HTML templates?
body: <p>I'm currently using KnockoutJS with its built-in template engine. What I'd like to do is create a master template that other templates can build on. Kinda like a UserControl in .NET but in HTML. </p>
  
  <p>Example:</p>
  
  <pre><code>&lt;script id="ParentTemplate" type="text/html"&gt;
      &lt;div class="Container"&gt;
          &lt;div class="Header"&gt;
              &lt;!-- Header Content Here --&gt;
          &lt;/div&gt;
  
          &lt;div class="Separator&gt;&lt;/div&gt;
  
          &lt;div class="Body"&gt;
              &lt;!-- Body Content Here --&gt;
          &lt;/div&gt;
  
          &lt;!-- more html here... --&gt;
  
          &lt;div class="Footer"&gt;
              &lt;!-- Footer content here --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script id="ChildTemplate" type="text/html"&gt;
      &lt;div data-bind="{template: { name: 'ParentTemplate' }}"&gt;
          &lt;header&gt;
              ...
          &lt;/header&gt;
  
          &lt;body&gt;
              ...
          &lt;/body&gt;
  
          &lt;footer&gt;
              ...
          &lt;/footer&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Please ignore the syntax of <code>ChildTemplate</code>; I'm just trying to illustrate sending parts to the <code>ParentTemplate</code>.</p>
  
  <p><strong>Please note</strong>: I'm building a pure HTML/JQuery/KnockoutJS single-page application. There is no .NET/PHP/etc. assisting with these templates.</p>