use mustache to abstract out html logic in javascript

Gemfile

@@ -21,6 +21,7 @@ group :assets do
   gem 'therubyracer', :platforms => :ruby
 
   gem 'uglifier', '>= 1.0.3'
+  gem 'mustache' #, :require => 'mustache/railtie'
 end
 
 gem 'jquery-rails'
@@ -44,7 +45,8 @@ gem 'kaminari-bootstrap'
 # To use Jbuilder templates for JSON
 # gem 'jbuilder'
 group :development do
-  gem  'pry'
+  gem 'pry'
+  gem 'pry-remote'
   gem 'rspec-rails'
   gem 'thin'
 end

Gemfile.lock

@@ -50,7 +50,7 @@ GEM
     arel (3.0.2)
     bcrypt-ruby (3.0.1)
     builder (3.0.4)
-    capybara (2.0.0)
+    capybara (2.0.1)
       mime-types (>= 1.16)
       nokogiri (>= 1.3.3)
       rack (>= 1.0.0)
@@ -97,7 +97,7 @@ GEM
     factory_girl_rails (4.1.0)
       factory_girl (~> 4.1.0)
       railties (>= 3.0.0)
-    ffi (1.1.5)
+    ffi (1.2.0)
     fssm (0.2.9)
     haml (3.1.7)
     haml-rails (0.3.5)
@@ -124,7 +124,7 @@ GEM
       actionpack (>= 3.1)
       less (~> 2.2.0)
     libv8 (3.3.10.4)
-    libwebsocket (0.1.6)
+    libwebsocket (0.1.6.1)
       websocket
     mail (2.4.4)
       i18n (>= 0.4.0)
@@ -135,6 +135,7 @@ GEM
     mini_magick (3.4)
       subexec (~> 0.2.1)
     multi_json (1.3.7)
+    mustache (0.99.4)
     nokogiri (1.5.5)
     orm_adapter (0.0.7)
     polyglot (0.3.3)
@@ -142,6 +143,9 @@ GEM
       coderay (~> 1.0.5)
       method_source (~> 0.8)
       slop (~> 3.3.1)
+    pry-remote (0.1.6)
+      pry (~> 0.9)
+      slop (~> 3.0)
     rack (1.4.1)
     rack-cache (1.2)
       rack (>= 0.4)
@@ -233,7 +237,7 @@ GEM
       multi_json (~> 1.0, >= 1.0.2)
     warden (1.1.1)
       rack (>= 1.0)
-    websocket (1.0.3)
+    websocket (1.0.4)
     xpath (1.0.0)
       nokogiri (~> 1.3)
 
@@ -253,7 +257,9 @@ DEPENDENCIES
   kaminari-bootstrap
   less-rails
   mini_magick
+  mustache
   pry
+  pry-remote
   rack-cors
   rails (= 3.2.9)
   rqrcode

app/assets/javascripts/user/application.js.erb

@@ -27,6 +27,7 @@
 //= require twitter/bootstrap/bootstrap-typeahead
 //= require twitter/bootstrap/bootstrap-affix
 //= require qwaiter
+//= require mustache
 //= require_directory .
 //= require_self
 var path_mapping = {
@@ -176,9 +177,20 @@ $(function(){
     container.show();
   }
   $('[data-t]').each(function(){$(this).text(t($(this).attr('data-t')))})
+  setTranslations();
 });
 function setLocale(locale){
   QMobile.setLocale(locale);
   $locale = locale;
-  $('[data-t]').each(function(){$(this).text(t($(this).attr('data-t')))})
+  setTranslations();
+}
+function Qupdate(selector){
+  setTranslations(selector);
+}
+function setTranslations(selector){
+  if(selector){
+    $(selector).find('[data-t]').each(function(){$(this).text(t($(this).attr('data-t')))})
+  }else{
+    $('[data-t]').each(function(){$(this).text(t($(this).attr('data-t')))})
+  }
 }

app/assets/javascripts/user/quser.js.coffee

@@ -175,31 +175,35 @@ window.Quser=
           link.attr('href', root_url + src + '?'+authentication_string+'&page='+i)
         li.append(link)
         list.append(li)
+  mustache: (selector, locals)->
+    locs = $.extend(locals,
+      currency: ->
+        (val)->
+          currency(Mustache.render(val, this))
+    )
+    Mustache.to_html($(selector).html(), locs)
   build_list_table: (body, foot, res) ->
     body.find('tr').remove()
     foot.find('tr').remove()
     if !res.orders && !res.orders.length
       alert('No orders in list')
       return
-    for order in res.orders
+    m_obj = res
+    for order in m_obj.orders
       order_txts = []
-      row = $('<tr></tr>').appendTo(body)
-      row.addClass(order.state)
-      #if(order.state == 'placed') row.addClass('info');
-      #if(order.state == 'delivered') row.addClass('success');
-      row.addClass('error') if order.state == 'cancelled'
       for product in order.products
         order_txts.push(product.name + ' (' + product['number'] + ')')
-      row.append($('<td></td>').text(order_txts.join(', ')))
+      order.products_display = order_txts.join(', ')
-      row.append($('<td class="currency"></td>').html(currency(order.total_amount)))
+    body.append @mustache('#active-list-orders-template', m_obj)
-    foot.append('<tr><td></td><td class="currency"><strong>'+currency(res.total_amount)+'</strong></td></tr>')
+    foot.append @mustache('#active-list-orders-footer-template', m_obj)
+
   order_selected_products: ()->
     return if $.isEmptyObject(window.active_products_list)
     h = {}
     match = window.document.URL.toString().match('table_id=([0-9a-zA-Z]+)')
     h['table_id'] = match[1] if match
-    for product_id, info of window.active_products_list
+    for product_id, number of window.active_products_list
-      h['products['+product_id+']'] = info.number
+      h['products['+product_id+']'] = number
     $.post(data_host + '/user/order_selected_products', $.extend(h, authentication_object), ((res) -> Quser.handle_response(res)), 'json')
   handle_response: (res) ->
     if(typeof(res) == 'string')
@@ -215,21 +219,17 @@ window.Quser=
     else
       redirect_to res.location || 'list_products' if res['ok']
   build_product_list: ->
-    table = $('#active-order-table')
-    tbody = table.find('tbody')
-    tbody = $('<tbody></tbody>').appendTo(table) unless tbody.length
-    tbody.find('tr').remove()
     total = 0.0
-    for product_id, info of window.active_products_list
+    h = {products: []}
-      total += info.product.price * info.number
+    for product_id, number of window.active_products_list
-      row = $('<tr></tr>').attr('id', 'active-order-row-'+product_id).appendTo(tbody)
+      product = window.products[product_id]
-      row.append('<td>'+info.product.name+'</td>')
+      product.number = number
-      row.append('<td>'+info.number+'</td>')
+      product.product_total = product.price * number
-      row.append('<td class="currency">'+currency(info.product.price * info.number)+'</td>')
+      h.products.push product
-      x_btn = $('<button class="btn btn-warning btn-mini">x</button>').click(-> delete(window.active_products_list[product_id]) && Quser.build_product_list() )
+      total += product.price * number
-      row.append($('<td></td>').append(x_btn))
+    h.total = total
-    $('#active-order-total').html(currency(total))
+    $('#active-order-container').html @mustache('#active-order-template', h)
-    table.show() 
+    Qupdate('#active-order-container')
 
   load_active_list_products: ->
     Quser.populate_products_table('/user/list_products.json?'+authentication_string)
@@ -256,40 +256,39 @@ window.Quser=
       if res.supplier_name
         $('.supplier-name').text(res.supplier_name)
         delete(res['supplier_name'])
+      window.products = {}
       body.find('tr').remove()
+      script_id = if include_order_buttons then '#products-category-for-order-template' else '#products-category-template'
       for category, products of res
-        body.append('<tr><td colspan="4"><h4>'+category+'<h4></td></tr>')
+        body.append Quser.mustache(script_id,
+          category: category,
+          products: products,
+          include_order_buttons: include_order_buttons
+        )
         for product in products
-          row = $('<tr></tr>')
+          window.products[product._id] = product
-          row.append('<td>'+product.name+'</td>')
-          if include_order_buttons
-            button = $('<button class="btn btn-mini btn-primary">Add</button>')
-            callback = ((prod) ->
-              ->
-                product_count_holder = $('#order-product-count-'+prod._id)
-                count = parseInt(product_count_holder.text())
-                product_count_holder.text(1)
-                Quser.add_product(prod, count)
-            )(product)
-            button.click(callback)
-            order_product_count = $('<span id="order-product-count-'+product._id+'" class="order-product-count">1</span>')
-            order_count_minus = $('<span class="btn btn-info btn-mini">-</span>')
-            order_count_minus.click(->
-              val_holder = $(this).siblings('.order-product-count')
-              val = parseInt(val_holder.text())
-              val_holder.text(val - 1) if val > 1
-            )
-            order_count_plus = $('<span class="btn btn-info btn-mini">+</span>')
-            order_count_plus.click(->
-              val_holder = $(this).siblings('.order-product-count')
-              val = parseInt(val_holder.text())
-              val_holder.text(val + 1)
-            )
-            row.append($('<td class="order-count-cell"></td>').append(order_count_minus).append('&nbsp;').append(order_product_count).append('&nbsp;').append(order_count_plus))
-          row.append('<td>'+currency(product.price)+'</td>')
-          row.append($('<td></td>').append(button)) if include_order_buttons
-          body.append(row)
     )
+  increment_products_counter: (product_id)->
+    product_count_holder = $('#order-product-count-'+product_id)
+    count = parseInt(product_count_holder.text())
+    product_count_holder.text(count + 1)
+    false
+  lower_products_counter: (product_id)->
+    product_count_holder = $('#order-product-count-'+product_id)
+    count = parseInt(product_count_holder.text())
+    product_count_holder.text(count - 1)
+    false
+  add_product_to_order: (product_id, context) ->
+    product_count_holder = $('#order-product-count-'+product_id)
+    count = parseInt(product_count_holder.text())
+    count ||= 1
+    product_count_holder.text(1)
+    window.active_products_list ||= {}
+    window.active_products_list[product_id] ||= 0
+    window.active_products_list[product_id] += count
+    delete(window.active_products_list[product_id]) if window.active_products_list[product_id] < 1
+    Quser.build_product_list()
+    false
   actions_for_table: (table)->
     table = JSON.parse(table) if typeof(table) == 'string'
     $.getJSON(data_host + '/user/table_info.json?'+authentication_string+'&table_id='+table.table_id, (res)->
@@ -357,11 +356,11 @@ window.Quser=
       else
         redirect_to 'user_root', {message: 'join_request_rejected'}
     )
-  add_product: (product, count) ->
+  add_product: (product_id, count) ->
     count ||= 1
-    window.active_products_list = {} unless window.active_products_list
+    window.active_products_list ||= {}
-    window.active_products_list[product._id] = {product: product, number: 0} unless window.active_products_list[product._id]
+    window.active_products_list[product_id] ||= 0
-    window.active_products_list[product._id].number += count
+    window.active_products_list[product_id] += count
     Quser.build_product_list()
   clear_selected_products: ->
     window.active_products_list = {}

app/templates/user/_active_list_orders.mustache

@@ -0,0 +1,6 @@
+{{#orders}}
+<tr class="{{state}}">
+  <td>{{products_display}}</td>
+  <td class="currency">{{#currency}}{{total_amount}}{{/currency}}</td>
+</tr>
+{{/orders}}

app/templates/user/_active_list_orders_footer.mustache

@@ -0,0 +1 @@
+<tr><td></td><td class="currency"><strong>{{#currency}}{{total_amount}}{{/currency}}</strong></td></tr>

app/templates/user/_active_order.mustache

@@ -0,0 +1,29 @@
+<table id="active-order-table" class="table">
+  <thead>
+    <tr>
+      <th data-t="models.product"></th>
+      <th>#</th>
+      <th class="currency" data-t="basket.total"></th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    {{#products}}
+    <tr>
+      <td>{{name}}</td>
+      <td>{{number}}</td>
+      <td class="currency">{{#currency}}{{product_total}}{{/currency}}</td>
+    </tr>
+    {{/products}}
+  </tbody>
+  <tfoot>
+    <tr>
+      <td colspan="2">
+        <button class="btn btn-primary" onClick="Quser.handle_active_list(function(){Quser.order_selected_products()})" data-t="selected_products.order"></button>
+        <button class="btn btn btn-warning" onClick="Quser.clear_selected_products()" data-t="selected_products.clear"></button>
+      </td>
+      <td class="currency"><strong id="active-order-total">{{#currency}}{{total}}{{/currency}}</strong></td>
+      <td></td>
+    <tr>
+  </tfoot>
+</table>

app/templates/user/_products_category.mustache

@@ -0,0 +1,7 @@
+<tr><td colspan="2"><h4>{{category}}</h4></td></tr>
+{{#products}}
+<tr>
+  <td>{{name}}</td>
+  <td>{{#currency}}{{price}}{{/currency}}</td>
+</tr>
+{{/products}}

app/templates/user/_products_category_for_order.mustache

@@ -0,0 +1,13 @@
+<tr><td colspan="4"><h4>{{category}}</h4></td></tr>
+{{#products}}
+<tr>
+  <td>{{name}}</td>
+  <td class="order-count-cell">
+    <span class="btn btn-info btn-mini" onclick="Quser.lower_products_counter('{{_id}}')">-</span>
+    <span id="order-product-count-{{_id}}" class="order-product-count">1</span>
+    <span class="btn btn-info btn-mini" onclick="Quser.increment_products_counter('{{_id}}')">+</span>
+  </td>
+  <td>{{#currency}}{{price}}{{/currency}}</td>
+  <td><button class="btn btn-mini btn-primary" onclick="Quser.add_product_to_order('{{_id}}', this)">Add</button></td>
+</tr>
+{{/products}}

app/views/layouts/phone.html.slim

@@ -17,7 +17,7 @@ html lang="en"
     link href="/images/apple-touch-icon.png" rel="apple-touch-icon-precomposed"
     link href="/favicon.ico" rel="shortcut icon"
     javascript:
-      var data_host = '#{Rails.env == 'development' ? 'http://localhost:3000' : 'http://data.qwaiter.com' }';
+      var data_host = '#{Rails.env == 'development' ? 'http://qwaiter.dev' : 'http://data.qwaiter.com' }';
       //var data_host = 'http://localhost:3000';
       //data_host = 'http://192.168.1.148:3000';
       var $locale = 'en';

app/views/user/active_list.html.slim

@@ -16,6 +16,8 @@
       tr
         td colspan=2 = slider_image
     tfoot
+script#active-list-orders-template[type="text/html"]= render 'active_list_orders.mustache'
+script#active-list-orders-footer-template[type="text/html"]= render 'active_list_orders_footer.mustache'
 - content_for :footer do
   javascript:
     jQuery(function(){

app/views/user/list_products.html.slim

@@ -11,23 +11,10 @@
     tbody
       tr
         td= slider_image
-  table#active-order-table.table.hide
+  #active-order-container
-    thead
+script#products-category-template[type="text/html"]= render 'products_category.mustache'
-      tr
+script#products-category-for-order-template[type="text/html"]= render 'products_category_for_order.mustache'
-        th data-t="models.product"= Product.model_name.human
+script#active-order-template[type="text/html"]= render 'active_order.mustache'
-        th #
-        th.currency data-t="basket.total"= t('user.basket.total')
-        th
-    tbody
-    tfoot
-      tr
-        td colspan=2
-          button class="btn btn-primary" onClick="Quser.handle_active_list(function(){Quser.order_selected_products()})" data-t="selected_products.order"= t('selected_products.order')
-          | 
-          button class="btn btn btn-warning" onClick="Quser.clear_selected_products()" data-t="selected_products.clear"= t('selected_products.clear')
-        td.currency
-          strong#active-order-total
-        td
 - content_for :footer do
   javascript:
     jQuery(function(){

app/views/user/list_products_for_table.html.slim

@@ -24,6 +24,8 @@
         td.currency
           strong#active-order-total
         td
+script#products-category-template[type="text/html"]= render 'products_category.mustache'
+script#products-category-for-order-template[type="text/html"]= render 'products_category_for_order.mustache'
 - content_for :footer do
   javascript:
     jQuery(function(){

config/initializers/mustache_template_handler.rb

@@ -0,0 +1,11 @@
+module MustacheTemplateHandler
+  def self.call(template)
+    if template.locals.include? :locals
+      "Mustache.render(#{template.source.inspect}, locals).html_safe"
+    else
+      "#{template.source.inspect}.html_safe"
+    end
+  end
+end
+ActionView::Template.register_template_handler(:mustache, MustacheTemplateHandler)
+ActionController::Base.view_paths << Rails.root.join('app', 'templates')

vendor/assets/javascripts/mustache.js

@@ -0,0 +1,625 @@
+/*!
+ * mustache.js - Logic-less {{mustache}} templates with JavaScript
+ * http://github.com/janl/mustache.js
+ */
+
+/*global define: false*/
+
+var Mustache;
+
+(function (exports) {
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = exports; // CommonJS
+  } else if (typeof define === "function") {
+    define(exports); // AMD
+  } else {
+    Mustache = exports; // <script>
+  }
+}((function () {
+
+  var exports = {};
+
+  exports.name = "mustache.js";
+  exports.version = "0.7.0";
+  exports.tags = ["{{", "}}"];
+
+  exports.Scanner = Scanner;
+  exports.Context = Context;
+  exports.Writer = Writer;
+
+  var whiteRe = /\s*/;
+  var spaceRe = /\s+/;
+  var nonSpaceRe = /\S/;
+  var eqRe = /\s*=/;
+  var curlyRe = /\s*\}/;
+  var tagRe = /#|\^|\/|>|\{|&|=|!/;
+
+  // Workaround for https://issues.apache.org/jira/browse/COUCHDB-577
+  // See https://github.com/janl/mustache.js/issues/189
+  function testRe(re, string) {
+    return RegExp.prototype.test.call(re, string);
+  }
+
+  function isWhitespace(string) {
+    return !testRe(nonSpaceRe, string);
+  }
+
+  var isArray = Array.isArray || function (obj) {
+    return Object.prototype.toString.call(obj) === "[object Array]";
+  };
+
+  function escapeRe(string) {
+    return string.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
+  }
+
+  var entityMap = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': '&quot;',
+    "'": '&#39;',
+    "/": '&#x2F;'
+  };
+
+  function escapeHtml(string) {
+    return String(string).replace(/[&<>"'\/]/g, function (s) {
+      return entityMap[s];
+    });
+  }
+
+  // Export the escaping function so that the user may override it.
+  // See https://github.com/janl/mustache.js/issues/244
+  exports.escape = escapeHtml;
+
+  function Scanner(string) {
+    this.string = string;
+    this.tail = string;
+    this.pos = 0;
+  }
+
+  /**
+   * Returns `true` if the tail is empty (end of string).
+   */
+  Scanner.prototype.eos = function () {
+    return this.tail === "";
+  };
+
+  /**
+   * Tries to match the given regular expression at the current position.
+   * Returns the matched text if it can match, the empty string otherwise.
+   */
+  Scanner.prototype.scan = function (re) {
+    var match = this.tail.match(re);
+
+    if (match && match.index === 0) {
+      this.tail = this.tail.substring(match[0].length);
+      this.pos += match[0].length;
+      return match[0];
+    }
+
+    return "";
+  };
+
+  /**
+   * Skips all text until the given regular expression can be matched. Returns
+   * the skipped string, which is the entire tail if no match can be made.
+   */
+  Scanner.prototype.scanUntil = function (re) {
+    var match, pos = this.tail.search(re);
+
+    switch (pos) {
+    case -1:
+      match = this.tail;
+      this.pos += this.tail.length;
+      this.tail = "";
+      break;
+    case 0:
+      match = "";
+      break;
+    default:
+      match = this.tail.substring(0, pos);
+      this.tail = this.tail.substring(pos);
+      this.pos += pos;
+    }
+
+    return match;
+  };
+
+  function Context(view, parent) {
+    this.view = view;
+    this.parent = parent;
+    this.clearCache();
+  }
+
+  Context.make = function (view) {
+    return (view instanceof Context) ? view : new Context(view);
+  };
+
+  Context.prototype.clearCache = function () {
+    this._cache = {};
+  };
+
+  Context.prototype.push = function (view) {
+    return new Context(view, this);
+  };
+
+  Context.prototype.lookup = function (name) {
+    var value = this._cache[name];
+
+    if (!value) {
+      if (name === ".") {
+        value = this.view;
+      } else {
+        var context = this;
+
+        while (context) {
+          if (name.indexOf(".") > 0) {
+            var names = name.split("."), i = 0;
+
+            value = context.view;
+
+            while (value && i < names.length) {
+              value = value[names[i++]];
+            }
+          } else {
+            value = context.view[name];
+          }
+
+          if (value != null) {
+            break;
+          }
+
+          context = context.parent;
+        }
+      }
+
+      this._cache[name] = value;
+    }
+
+    if (typeof value === "function") {
+      value = value.call(this.view);
+    }
+
+    return value;
+  };
+
+  function Writer() {
+    this.clearCache();
+  }
+
+  Writer.prototype.clearCache = function () {
+    this._cache = {};
+    this._partialCache = {};
+  };
+
+  Writer.prototype.compile = function (template, tags) {
+    var fn = this._cache[template];
+
+    if (!fn) {
+      var tokens = exports.parse(template, tags);
+      fn = this._cache[template] = this.compileTokens(tokens, template);
+    }
+
+    return fn;
+  };
+
+  Writer.prototype.compilePartial = function (name, template, tags) {
+    var fn = this.compile(template, tags);
+    this._partialCache[name] = fn;
+    return fn;
+  };
+
+  Writer.prototype.compileTokens = function (tokens, template) {
+    var fn = compileTokens(tokens);
+    var self = this;
+
+    return function (view, partials) {
+      if (partials) {
+        if (typeof partials === "function") {
+          self._loadPartial = partials;
+        } else {
+          for (var name in partials) {
+            self.compilePartial(name, partials[name]);
+          }
+        }
+      }
+
+      return fn(self, Context.make(view), template);
+    };
+  };
+
+  Writer.prototype.render = function (template, view, partials) {
+    return this.compile(template)(view, partials);
+  };
+
+  Writer.prototype._section = function (name, context, text, callback) {
+    var value = context.lookup(name);
+
+    switch (typeof value) {
+    case "object":
+      if (isArray(value)) {
+        var buffer = "";
+
+        for (var i = 0, len = value.length; i < len; ++i) {
+          buffer += callback(this, context.push(value[i]));
+        }
+
+        return buffer;
+      }
+
+      return value ? callback(this, context.push(value)) : "";
+    case "function":
+      var self = this;
+      var scopedRender = function (template) {
+        return self.render(template, context);
+      };
+
+      var result = value.call(context.view, text, scopedRender);
+      return result != null ? result : "";
+    default:
+      if (value) {
+        return callback(this, context);
+      }
+    }
+
+    return "";
+  };
+
+  Writer.prototype._inverted = function (name, context, callback) {
+    var value = context.lookup(name);
+
+    // Use JavaScript's definition of falsy. Include empty arrays.
+    // See https://github.com/janl/mustache.js/issues/186
+    if (!value || (isArray(value) && value.length === 0)) {
+      return callback(this, context);
+    }
+
+    return "";
+  };
+
+  Writer.prototype._partial = function (name, context) {
+    if (!(name in this._partialCache) && this._loadPartial) {
+      this.compilePartial(name, this._loadPartial(name));
+    }
+
+    var fn = this._partialCache[name];
+
+    return fn ? fn(context) : "";
+  };
+
+  Writer.prototype._name = function (name, context) {
+    var value = context.lookup(name);
+
+    if (typeof value === "function") {
+      value = value.call(context.view);
+    }
+
+    return (value == null) ? "" : String(value);
+  };
+
+  Writer.prototype._escaped = function (name, context) {
+    return exports.escape(this._name(name, context));
+  };
+
+  /**
+   * Calculates the bounds of the section represented by the given `token` in
+   * the original template by drilling down into nested sections to find the
+   * last token that is part of that section. Returns an array of [start, end].
+   */
+  function sectionBounds(token) {
+    var start = token[3];
+    var end = start;
+
+    var tokens;
+    while ((tokens = token[4]) && tokens.length) {
+      token = tokens[tokens.length - 1];
+      end = token[3];
+    }
+
+    return [start, end];
+  }
+
+  /**
+   * Low-level function that compiles the given `tokens` into a function
+   * that accepts three arguments: a Writer, a Context, and the template.
+   */
+  function compileTokens(tokens) {
+    var subRenders = {};
+
+    function subRender(i, tokens, template) {
+      if (!subRenders[i]) {
+        var fn = compileTokens(tokens);
+        subRenders[i] = function (writer, context) {
+          return fn(writer, context, template);
+        };
+      }
+
+      return subRenders[i];
+    }
+
+    return function (writer, context, template) {
+      var buffer = "";
+      var token, sectionText;
+
+      for (var i = 0, len = tokens.length; i < len; ++i) {
+        token = tokens[i];
+
+        switch (token[0]) {
+        case "#":
+          sectionText = template.slice.apply(template, sectionBounds(token));
+          buffer += writer._section(token[1], context, sectionText, subRender(i, token[4], template));
+          break;
+        case "^":
+          buffer += writer._inverted(token[1], context, subRender(i, token[4], template));
+          break;
+        case ">":
+          buffer += writer._partial(token[1], context);
+          break;
+        case "&":
+          buffer += writer._name(token[1], context);
+          break;
+        case "name":
+          buffer += writer._escaped(token[1], context);
+          break;
+        case "text":
+          buffer += token[1];
+          break;
+        }
+      }
+
+      return buffer;
+    };
+  }
+
+  /**
+   * Forms the given array of `tokens` into a nested tree structure where
+   * tokens that represent a section have a fifth item: an array that contains
+   * all tokens in that section.
+   */
+  function nestTokens(tokens) {
+    var tree = [];
+    var collector = tree;
+    var sections = [];
+    var token, section;
+
+    for (var i = 0; i < tokens.length; ++i) {
+      token = tokens[i];
+
+      switch (token[0]) {
+      case "#":
+      case "^":
+        token[4] = [];
+        sections.push(token);
+        collector.push(token);
+        collector = token[4];
+        break;
+      case "/":
+        if (sections.length === 0) {
+          throw new Error("Unopened section: " + token[1]);
+        }
+
+        section = sections.pop();
+
+        if (section[1] !== token[1]) {
+          throw new Error("Unclosed section: " + section[1]);
+        }
+
+        if (sections.length > 0) {
+          collector = sections[sections.length - 1][4];
+        } else {
+          collector = tree;
+        }
+        break;
+      default:
+        collector.push(token);
+      }
+    }
+
+    // Make sure there were no open sections when we're done.
+    section = sections.pop();
+
+    if (section) {
+      throw new Error("Unclosed section: " + section[1]);
+    }
+
+    return tree;
+  }
+
+  /**
+   * Combines the values of consecutive text tokens in the given `tokens` array
+   * to a single token.
+   */
+  function squashTokens(tokens) {
+    var token, lastToken, squashedTokens = [];
+
+    for (var i = 0; i < tokens.length; ++i) {
+      token = tokens[i];
+
+      if (lastToken && lastToken[0] === "text" && token[0] === "text") {
+        lastToken[1] += token[1];
+        lastToken[3] = token[3];
+      } else {
+        lastToken = token;
+        squashedTokens.push(token);
+      }
+    }
+
+    return squashedTokens; 
+  }
+
+  function escapeTags(tags) {
+    if (tags.length !== 2) {
+      throw new Error("Invalid tags: " + tags.join(" "));
+    }
+
+    return [
+      new RegExp(escapeRe(tags[0]) + "\\s*"),
+      new RegExp("\\s*" + escapeRe(tags[1]))
+    ];
+  }
+
+  /**
+   * Breaks up the given `template` string into a tree of token objects. If
+   * `tags` is given here it must be an array with two string values: the
+   * opening and closing tags used in the template (e.g. ["<%", "%>"]). Of
+   * course, the default is to use mustaches (i.e. Mustache.tags).
+   */
+  exports.parse = function (template, tags) {
+    tags = tags || exports.tags;
+
+    var tagRes = escapeTags(tags);
+    var scanner = new Scanner(template);
+
+    var tokens = [],      // Buffer to hold the tokens
+        spaces = [],      // Indices of whitespace tokens on the current line
+        hasTag = false,   // Is there a {{tag}} on the current line?
+        nonSpace = false; // Is there a non-space char on the current line?
+
+    // Strips all whitespace tokens array for the current line
+    // if there was a {{#tag}} on it and otherwise only space.
+    function stripSpace() {
+      if (hasTag && !nonSpace) {
+        while (spaces.length) {
+          tokens.splice(spaces.pop(), 1);
+        }
+      } else {
+        spaces = [];
+      }
+
+      hasTag = false;
+      nonSpace = false;
+    }
+
+    var start, type, value, chr;
+
+    while (!scanner.eos()) {
+      start = scanner.pos;
+      value = scanner.scanUntil(tagRes[0]);
+
+      if (value) {
+        for (var i = 0, len = value.length; i < len; ++i) {
+          chr = value.charAt(i);
+
+          if (isWhitespace(chr)) {
+            spaces.push(tokens.length);
+          } else {
+            nonSpace = true;
+          }
+
+          tokens.push(["text", chr, start, start + 1]);
+          start += 1;
+
+          if (chr === "\n") {
+            stripSpace(); // Check for whitespace on the current line.
+          }
+        }
+      }
+
+      start = scanner.pos;
+
+      // Match the opening tag.
+      if (!scanner.scan(tagRes[0])) {
+        break;
+      }
+
+      hasTag = true;
+      type = scanner.scan(tagRe) || "name";
+
+      // Skip any whitespace between tag and value.
+      scanner.scan(whiteRe);
+
+      // Extract the tag value.
+      if (type === "=") {
+        value = scanner.scanUntil(eqRe);
+        scanner.scan(eqRe);
+        scanner.scanUntil(tagRes[1]);
+      } else if (type === "{") {
+        var closeRe = new RegExp("\\s*" + escapeRe("}" + tags[1]));
+        value = scanner.scanUntil(closeRe);
+        scanner.scan(curlyRe);
+        scanner.scanUntil(tagRes[1]);
+        type = "&";
+      } else {
+        value = scanner.scanUntil(tagRes[1]);
+      }
+
+      // Match the closing tag.
+      if (!scanner.scan(tagRes[1])) {
+        throw new Error("Unclosed tag at " + scanner.pos);
+      }
+
+      tokens.push([type, value, start, scanner.pos]);
+
+      if (type === "name" || type === "{" || type === "&") {
+        nonSpace = true;
+      }
+
+      // Set the tags for the next time around.
+      if (type === "=") {
+        tags = value.split(spaceRe);
+        tagRes = escapeTags(tags);
+      }
+    }
+
+    tokens = squashTokens(tokens);
+
+    return nestTokens(tokens);
+  };
+
+  // The high-level clearCache, compile, compilePartial, and render functions
+  // use this default writer.
+  var _writer = new Writer();
+
+  /**
+   * Clears all cached templates and partials in the default writer.
+   */
+  exports.clearCache = function () {
+    return _writer.clearCache();
+  };
+
+  /**
+   * Compiles the given `template` to a reusable function using the default
+   * writer.
+   */
+  exports.compile = function (template, tags) {
+    return _writer.compile(template, tags);
+  };
+
+  /**
+   * Compiles the partial with the given `name` and `template` to a reusable
+   * function using the default writer.
+   */
+  exports.compilePartial = function (name, template, tags) {
+    return _writer.compilePartial(name, template, tags);
+  };
+
+  /**
+   * Compiles the given array of tokens (the output of a parse) to a reusable
+   * function using the default writer.
+   */
+  exports.compileTokens = function (tokens, template) {
+    return _writer.compileTokens(tokens, template);
+  };
+
+  /**
+   * Renders the `template` with the given `view` and `partials` using the
+   * default writer.
+   */
+  exports.render = function (template, view, partials) {
+    return _writer.render(template, view, partials);
+  };
+
+  // This is here for backwards compatibility with 0.4.x.
+  exports.to_html = function (template, view, partials, send) {
+    var result = exports.render(template, view, partials);
+
+    if (typeof send === "function") {
+      send(result);
+    } else {
+      return result;
+    }
+  };
+
+  return exports;
+
+}())));