Skip to content

Instantly share code, notes, and snippets.

@chug2k
Created February 28, 2014 03:14
Show Gist options
  • Select an option

  • Save chug2k/9264490 to your computer and use it in GitHub Desktop.

Select an option

Save chug2k/9264490 to your computer and use it in GitHub Desktop.
Resig Intro
// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
var cache = {};
this.tmpl = function tmpl(str, data){
// Figure out if we're getting a template, or if we need to
// load the template - and be sure to cache the result.
var fn = !/\W/.test(str) ?
cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) :
// Generate a reusable function that will serve as a template
// generator (and which will be cached).
new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};" +
// Introduce the data as local variables using with(){}
"with(obj){p.push('" +
// Convert the template into pure JavaScript
str
.replace(/[\r\t\n]/g, " ")
.split("<%").join("\t")
.replace(/((^|%>)[^\t]*)'/g, "$1\r")
.replace(/\t=(.*?)%>/g, "',$1,'")
.split("\t").join("');")
.split("%>").join("p.push('")
.split("\r").join("\\'")
+ "');}return p.join('');");
// Provide some basic currying to the user
return data ? fn( data ) : fn;
};
})();
@chug2k

chug2k commented Feb 28, 2014

Copy link
Copy Markdown
Author

drop this in application.js.

@chug2k

chug2k commented Feb 28, 2014

Copy link
Copy Markdown
Author
var precompiledTemplate = tmpl('<p><%= value %></p>');

@chug2k

chug2k commented Feb 28, 2014

Copy link
Copy Markdown
Author

then refer to precompiledTemplate in your typeahead template argument.

@justinpinili

Copy link
Copy Markdown

Currently i have

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require jquery.ui.datepicker
//= require bootstrap
//= require turbolinks
//= require twitter/typeahead
//= require_tree .

// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
  var cache = {};

  this.tmpl = function tmpl(str, data){
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

      // Generate a reusable function that will serve as a template
      // generator (and which will be cached).
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +

        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +

        // Convert the template into pure JavaScript
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");

    // Provide some basic currying to the user
    return data ? fn( data ) : fn;
  };
})();

var precompiledTemplate = tmpl('<p><%= value %></p>');

$(document).ready(function() {
  $('.typeahead').typeahead( {
                                name: 'name',
                                remote: '/artist_search?q=%QUERY',
                                templates: {
                                  suggestion: precompiledTemplate
                                }
                              }
                            );
});

I'm not sure if this is right

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment