title: Serving client side Jade templates
body: <p>I want to use Jade templates at the client side with Backbone. How can I do that? </p>
  
  <p>For now, I have successfully configured Backbone (Marionette) to compile Jade templates for use in its Views: </p>
  
  <pre><code>Marionette.TemplateCache.prototype.compileTemplate = (tmplStr) -&gt;
      console.log "jade stuff: ", jade.compile(tmplStr)
      return jade.compile(tmplStr)
  </code></pre>
  
  <p>The "problem" is: I am currently writing templates like: </p>
  
  <pre><code>script(type="text/template", id="tmplMainView")
      | h1= title
      | p= content
  </code></pre>
  
  <p>Notice the pipes (<code>|</code>) those are to prevent Jade from trying to interpret/parse them on server side. How can I eliminate those? </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Perhaps I can use the <code>jade --client</code> flag ... but it gives a single compiled function: for example </p>
  
  <pre><code>h1= title
  </code></pre>
  
  <p>Becomes </p>
  
  <pre><code>function anonymous(locals, attrs, escape, rethrow, merge) {
  attrs = attrs || jade.attrs; escape = escape || jade.escape; rethrow = rethrow || jade.rethrow; merge = merge || jade.merge;
  var buf = [];
  with (locals || {}) {
  var interp;
  buf.push('&lt;h1&gt;');
  var __val__ = title
  buf.push(escape(null == __val__ ? "" : __val__));
  buf.push('&lt;/h1&gt;');
  }
  return buf.join("");
  }
  </code></pre>
  
  <p>That means I have to have 1 Jade/compiled JS for each template? How might I use it? Also I think many JS files is a slow way to work? But since template functions are all named anonymous, how can I then concat or somehow work with them effectively? </p>