Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><a href="http://icanhazjs.com/" rel="noreferrer">ICanHaz.js</a> (ICH) can help you with this.</p> <blockquote> <p><a href="http://icanhazjs.com/" rel="noreferrer">ICanHaz.js</a>: A simple/powerful approach for doing client-side templating with Mustache.js.</p> </blockquote> <p>I've found that mixing templates (in scripts tags) with the ordinary HTML in the page messes with my code editor (syntax highlighting, indenting etcetera). Loading them as a separate server keeps your HTML clean.</p> <p>Check out <a href="https://github.com/feraudet/ICanHaz.js/commit/12c8daa7396f363f72a341ba9926c243db39834a" rel="noreferrer">this ICH pull request for automatic loading of <code>&lt;script type="text/html" src="my-templates.html"&gt;&lt;/script&gt;</code> from your server</a> to one template per file.</p> <p>You could also <a href="https://github.com/HenrikJoreteg/ICanHaz.js/issues/36#issuecomment-36201520" rel="noreferrer">load more than one template per remote HTML file this</a> using simple code like:</p> <pre><code>function getTemplates(url) { $.get(url, function (response) { $('template', response).each(function () { ich.addTemplate(this.id, $(this).text()); }); }); } </code></pre> <p>Or, if you'd like ICH to load them automatically from urls in your page:</p> <pre><code>&lt;head&gt; &lt;link rel="templates" type="text/html" href="my-templates.html"&gt; &lt;/head&gt; </code></pre> <pre><code>$("link[type=templates]").each(function (index, link) { getTemplates(link.attr("href")); }); </code></pre> <p>In your <code>my-templates.html</code></p> <pre><code>&lt;templates&gt; &lt;template id="ul-template"&gt; &lt;ul id="list"&gt; {{&gt; li-templ}} &lt;/ul&gt; &lt;/template&gt; &lt;template id="ul-template2"&gt; &lt;div id="list2"&gt; {{&gt; li-templ}} &lt;/div&gt; &lt;/template&gt; &lt;template id="li-templ"&gt; &lt;p&gt;{{ name }}&lt;/p&gt; &lt;/template&gt; &lt;/templates&gt; </code></pre>
    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. 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