Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This question is very interesting! I had the same problem several months ago when I started to use mustache for 'huge' front-end templating within a rails project.</p> <p>I ended up with the following solution...</p> <hr> <p>Mustache templates are inside a public folder :</p> <blockquote> <pre><code>/public/templates/_template_name.tpl </code></pre> </blockquote> <p>Whenever I need a template I have this helper <em>getTemplate</em> that does some stuff (there's some mootools, but there are comments too):</p> <pre><code>// namespace.templatesCache is an object ( {} ) defined inside the main app js file var needXHR = false, // for callback function templateHTML = ""; //template html if(!(templateHTML = namespace.templatesCache[template_name])){ //if template is not cached templateHTML = (this.helpers.supportLocalStorage) ? localStorage.getItem(template_name) : ""; //if browser supports local storage, check if I can retrieve it if(templateHTML === "" || templateHTML === null){ // if I don't have a template (usually, first time), retrieve it by ajax needXHR = true; new Request.HTML({ //or jQuery's $.get( url /*, etc */ ) url: namespace.URLS.BASE+"templates/_"+template_name+".tpl", // url of the template file onSuccess : function(t, e, html, js){ namespace.templatesCache[template_name] = html; //cache it if(_this.helpers.supportLocalStorage){ //and store it inside local storage, if available localStorage.setItem(template_name,html); } //call callback } }).get(); }else{ //retrieved by localStorage, let's cache it namespace.templatesCache[template_name] = templateHTML; } } if(!needXHR){ // I retrieved template by cache/localstorage, not by Ajax //call callback } </code></pre> <p>and I call this helper in this way : </p> <pre><code>namespace.helpers.getTemplate('template_name', function( templateHTML ){ // the callback function }); </code></pre> <p>You can notice that first time user needs the template, there's an asynch request (you could make a sync request if u don't want to wrap some other code inside the callback)</p> <p>I hope it could help and I'd love to receive feedbacks/suggestions concerning this stuff :) </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload