0 Replies Latest reply on Jan 23, 2013 9:38 AM by aryno

    How to parse templates using Mustache.js, Handlebars.js, etc.

    aryno Level 1

      I have an interesting problem that I can't find a solution for anywhere. Basically I'm building a system where the user uploads an Edge template they create themselves, map different data points like text, images, etc. to tags they place in the template. Then I'm loading the templates using an Iframe to display to the end user. The problem is I want to parse the templates to replace the template tags with the data that is mapped. I'd rather stay away from rewriting the *_edge.js file and saving it in a different location, so I'm trying to use Mustache.js (or any other templating system in Javascript).


      The problem is finding the right events to hook on. Currently I'm using:


      $('iframe').load(function() {

           frames[$(this).attr('id')].AdobeEdge.Symbol.bindElementAction('EDGE-74745603', 'stage', 'document', 'ready', function() {

                /* rendering here */




      However, when load() is called, Symbol doesn't existing in the AdobeEdge object. I can see that Edge calls a "loaded" event, but I can never see it called (added a console.log() call right when it's triggered but never saw it in my console).


      Basically the problem boils down to: how can I either intercept and parse the text being passed to the template, or how can I rewrite the DOM after the text has been inserted?


      Edit: I'm now trying to call a function using onreadystatechange for the iframe to detect when it's "complete" (preload JS sets that when all the scripts are in). Not sure if that will work, but trying to get it working.