jQuery Template - Reverse Templating

Question

Hello All,
So i'm working on a document system with a templating feature built in. On one page you will create your template with 'tags' using the jQuery templating markup:

${RestaurantName}
${ContactName}

Then on the documents page you would choose the template to use and then it would convert your tags into HTML markup. The documents page uses CKEditor for the WYSIWYG editing. Right now I have it so that when the template is rendered it will look like:

<span class="RestaurantName">Ruby Tuesdays</span>
<span class="ContactName">Bob Smith</span>

The idea is before I send the document back to the database to save I would like to convert my back in to template tags so that if the data is updated on the site somewhere else it will also be updated when the page is rendered again.

Any help or pointers on how I could accomplish this would be a huge help. Thank you!

Answer 1

It might be easier to think about getting the data from the DOM instead of "reverse templating". Look into $.link() (jQuery 1.4.3) or use the jeditable plugin to update element data on the fly.

Answer 2

Through some help on the StackOverFlow chat room I was able to figure out how to convert the above text:

var editorText = ckeditor.ckeditorGet().getData(), temp = $('<div />').append(editorText);

$.each(templateTags, function(name, val){
    temp.find('span.'+name).after('{{html '+name+'}}').remove(); 
}); 

console.log(temp.html());