/** * jQuery plugin for micro templates * * Strings are automatically escaped, but that can be disabled by setting * escapeFunction to null. * * Usage examples: * * var htmlStr = '<p>Bake, uncovered, until the {greasystuff} is melted and the {pasta} is heated through, about {min} minutes.</p>' * $(htmlStr).octemplate({greasystuff: 'cheese', pasta: 'macaroni', min: 10}); * * var htmlStr = '<p>Welcome back {user}</p>'; * $(htmlStr).octemplate({user: 'John Q. Public'}, {escapeFunction: null}); * * Be aware that the target string must be wrapped in an HTML element for the * plugin to work. The following won't work: * * var textStr = 'Welcome back {user}'; * $(textStr).octemplate({user: 'John Q. Public'}); * * For anything larger than one-liners, you can use a simple $.get() ajax * request to get the template, or you can embed them it the page using the * text/template type: * * <script id="contactListItemTemplate" type="text/template"> * <tr class="contact" data-id="{id}"> * <td class="name"> * <input type="checkbox" name="id" value="{id}" /><span class="nametext">{name}</span> * </td> * <td class="email"> * <a href="mailto:{email}">{email}</a> * </td> * <td class="phone">{phone}</td> * </tr> * </script> * * var $tmpl = $('#contactListItemTemplate'); * var contacts = // fetched in some ajax call * * $.each(contacts, function(idx, contact) { * $contactList.append( * $tmpl.octemplate({ * id: contact.getId(), * name: contact.getDisplayName(), * email: contact.getPreferredEmail(), * phone: contact.getPreferredPhone(), * }); * ); * }); */ (function( $ ) { /** * Object Template * Inspired by micro templating done by e.g. underscore.js */ var Template = { init: function(vars, options, elem) { // Mix in the passed in options with the default options this.vars = vars; this.options = $.extend({},this.options,options); this.elem = elem; var self = this; if(typeof this.options.escapeFunction === 'function') { var keys = Object.keys(this.vars); for (var key = 0; key < keys.length; key++) { if(typeof this.vars[keys[key]] === 'string') { this.vars[keys[key]] = self.options.escapeFunction(this.vars[keys[key]]); } } } var _html = this._build(this.vars); return $(_html); }, // From stackoverflow.com/questions/1408289/best-way-to-do-variable-interpolation-in-javascript _build: function(o){ var data = this.elem.attr('type') === 'text/template' ? this.elem.html() : outerHTML(this.elem.get(0)); try { return data.replace(/{([^{}]*)}/g, function (a, b) { var r = o[b]; return typeof r === 'string' || typeof r === 'number' ? r : a; } ); } catch(e) { console.error(e, 'data:', data); } }, options: { escapeFunction: escapeHTML } }; $.fn.octemplate = function(vars, options) { var vars = vars ? vars : {}; if(this.length) { var _template = Object.create(Template); return _template.init(vars, options, this); } }; })( jQuery );