title: using jQuery .ajax & .text() to load template to DOM
body: <p>i've inherited some code that I'm not sure I fully understand...<br>
  we're building a cordova app that uses micro templates<br>
  and this particular piece of code has me slightly confused :</p>
  
  <pre><code>this.loadExternalTemplates = function(templateElements, index, callback) {
          var self = this;
          if (index &gt;= templateElements.length) {     
              callback();
          } else {
              // Load each of the templates into DOM
              var $currElement = $(templateElements[index]);
              $.ajax({
                  type : 'GET',
                  url : $currElement.attr("src"),
                  dataType : 'text',
                  timeout : 3000,
                  success : function(template) {
                      // Write the template to script tag
                      $currElement.text(template);
  
                      // Iterate / loop to load next template
                      self.loadExternalTemplates(templateElements, ++index, callback);
                  },
                  error : function(error) {
                      helper.alert("Error occured. Please try again.", error);
                  }
          });
      }
  };
  </code></pre>
  
  <p>the loadExternalTemplates() function variable is called by the following:</p>
  
  <pre><code>this.onDeviceReady = function() {
          var self = this;
          // Load all referenced templates
          self.loadExternalTemplates($("script[type='text/html']"), 0, function() {
  
              // Initialize the sammy object
              self.initSammyBindings();
          });
  };
  </code></pre>
  
  <p>in our main.html we have the script / template tags like:</p>
  
  <pre><code>&lt;script type="text/html" id="about-template" src="templates/about.tmpl.html"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The code works as it is (ie templates are loaded), but i'm not completely following the logic.</p>
  
  <p>I understand the following :</p>
  
  <ul>
  <li>scripts with <code>type="text/html"</code> are ignored by / hidden from the browser since <code>"text/html"</code> doesn't mean anything in a script tag</li>
  <li>the call within onDeviceReady() function uses jQuery to get all scripts with <code>type="text/html"</code> and loads them to the  loadExternalTemplates() function (as the templateElements variable)</li>
  <li>the ajax call uses the <code>src</code> value of each of the script elements to load the contents (html) via GET</li>
  <li>the jQuery .txt function is used to add the html to the DOM script tag</li>
  </ul>
  
  <p>What I don't understand is</p>
  
  <ul>
  <li>why the jQuery .text(text) method is used instead of the .html() method ?  doesn't .text strip out the html ? (again it's working, so obviously not, but i'm not fully getting why)</li>
  <li>wouldn't it be more efficient to use jQuery .load() instead of .ajax() ?</li>
  <li>why load all templates to the DOM at the same time ? doesn't that defeat the purpose of having templates ?</li>
  <li>why loop that way (surely there's a better <code>for each()</code> or <code>for()</code> loop methodology ) - just bad coding or something i'm missing ?</li>
  <li>is there a better (standard?) way of loading templates to the DOM ? on demand ?</li>
  </ul>