portable templates. in rails and js.

_flash.html.erb

<%

  unless @flash_has_already_been_rendered

    flash = self.flash  ### see http://groups.google.ca/group/rubyonrails-talk/browse_thread/thread/8e54e4bc3c2b4366
    keys = flash_message_keys
    javascript = []

    unless flash[:hide]
      keys.each do |key|
        msgs = flash[key]
        next if msgs.blank?
        msg = Array(msgs).join("<br /><br />")
        javascript.push("App.flash(#{ msg.to_json }, {'message' : #{ key.to_json }});")
      end
    end

    keys.each{|key| self.flash.delete(key)}
    self.flash.delete(:hide)

%>

  <div class='flash' style='display:none'>
    <script>
      jQuery(function(){
        <%= raw(javascript.join("\n")) %>
      });
    </script>
  </div>

  <noscript>
    <div class="flash">
      <div class="error">
        <span class="message">You need javascript enabled for the internet to function properly.</span>
      </div>
    </div>
  </noscript>

<%
  end

  @flash_has_already_been_rendered = true
%>

_templates.html.erb

<!--
    
  flash alerts

--> 
      
  <script class='template' name='flash-list-item' type='text/template'>
    <div class="alert">
      {{{ message }}}
      <a class='dismiss close' href='javascript:void(42)'>&#215;</a>
    </div>

  </script>

application.js

App = {};

// find and pre-compile all mustache templates on the page. cache them by name.
//
  var Template = function(name, template){
    this.name = name;
    this.template = template;
  };
  Template.prototype.render = function(view, partials){
    return jq(jq.mustache(this.template, view, partials));
  };
  jq('script.template').each(function(){
    var j = jq(this);
    var name = j.attr('name');
    var html = j.html();
    var options = {};
    Template[name] = new Template(name, html);
  });
  App.templates = Template;;


// flash message support
//
  if(!App.mobile){

    App.flash = function(msg, options){
      options = options || {};
      var flash = jq('.flash');
      flash.show();

      var template = App.templates['flash-list-item'];
      var data = {'message' : msg};
      var message = template.render(data);

      var dismiss = message.find('.dismiss');
      dismiss.click(function(){ message.remove(); });

      var close = message.find('.close');
      close.click(function(){ message.remove(); });

      message.addClass(
        options['css.class'] ||
        options['class'] ||
        options['kind'] ||
        'info'
      );

      flash.append(message);
      return(message);
    };

  } else {

    App.flash = function(msg, options){
      options = options || {};
      var label = options.message || 'info';
      var message = label + ': ' + msg;
      alert(msg);
      return(message);
    };

  }

template.rb

# lib/template.rb
#
# Template.load_file('app/views/shared/_templates.html.rb')

class Template 
  def Template.load_file(file, options = {})
    html = file.respond_to?(:read) ? file.read : IO.read(file.to_s)
    doc = Nokogiri::HTML(html)

    doc.search('script').each do |script|
      name = script['name']
      content = script.content
      template = new(content, options = {})
      cache[name] = template
    end
  end

  def Template.cache
    @cache ||= Map.new
  end

  def initialize(template, options = {})
    @template = template
  end

  def render(data = {})
    Mustache.render(@template, data)
  end
end