title: Mustache and nested templates
body: <p>I have a tree-like setup, where each node contains its own Mustache template that might be wrapped in a parent node's template.</p>
  
  <pre><code>var templates = {
      secondTmpl: Mustache.compile("&lt;i&gt;Yet another template.. Here's some text: {{text}}&lt;/i&gt;     {{date}}"),
      template: Mustache.compile("&lt;b&gt;{{val}}&lt;/b&gt;&lt;p&gt;{{{outlet}}}&lt;/p&gt;&lt;ul&gt;{{#list}}&lt;li&gt;{{.}}            &lt;/li&gt;{{/list}}&lt;/ul&gt; {{test}}")
  };
  
  var tree = [
      {
          template: "template",
          data: { val: "yup!!", list: [1,2,3,4,5], test: function() { return new Date(); } },
          children: [
              {
                  view: "Main",
                  template: "secondTmpl",
                  data: { text: "Some Value", date: function() { return new Date(); } }
              }
          ] 
      }
  ];
  
  function MainView(options) {
      this.template = options.template;
      this.data = options.data;
      this.childViews = options.childViews;
      this.el = document.createElement("div");
  }
  
  MainView.prototype.render = function() {
      View.prototype.render.call(this);
      this.postRender();
      return this;
  };
  
  MainView.prototype.postRender = function() {
      this.el.getElementsByTagName("i")[0].style.border = "1px dotted red";
  };
  
  function View(options) {
      this.template = options.template;
      this.data = options.data;
      this.childViews = options.childViews;
      this.el = document.createElement("div");
  }
  
  View.prototype.render = function(renderChildren) {
      if(this.childViews) {
          this.data.outlet = "&lt;div class=\"outlet\"&gt;&lt;/div&gt;";
      }
  
      this.el.innerHTML = this.template(this.data);
  
      if(this.childViews) {
          this.childViews.forEach(function(view) {
              this.el.getElementsByClassName("outlet")[0].appendChild(view.render().el);
          }, this);
      }
  
      return this;
  };
  
  function traverse(node) {
      var viewOptions = {
          template: templates[node.template],
          data: node.data
      };
  
      if(node.children) {
          viewOptions.childViews = node.children.map(function(n) {
              return traverse(n);
          });
      }
  
      return node.view ? new window[node.view + "View"](viewOptions) : new View(viewOptions);
  }
  
  function init() {
      tree.forEach(function(node) {
          var view = traverse(node);
          document.body.appendChild(view.render().el);
      });
  }
  
  window.onload = init;​
  </code></pre>
  
  <p>Example here: <a href="http://jsfiddle.net/b4fTB/" rel="nofollow">http://jsfiddle.net/b4fTB/</a></p>
  
  <p>The reason that I have the data in a tree is because the nested templates varies depending on the users data, and because many templates may be wrapped in different templates.</p>
  
  <p>I don't know if what I'm doing here is stupid, but it allows me to render the templates from C# as well, which is quite nice.</p>
  
  <p>So - the question (comments to the above is of course welcome). When dealing with a template with nested templates, it would be nice to have a simple function that only returns dom elements related to the actual template - and not dom elements from the nested templates. Is this even possible? And is it possible in a way that allows for deeply nested templates and not lose a great deal of performance? In other words, I have two templates where one of them is nested within the other in the jsfiddle. It would be nice not having to worry about nested views in the parent view when dealing with the dom.</p>