[closure-compiler-discuss] AJAX/JSON + advanced optimizations + templates = trouble

[Dave]

While halfway through writing this question, I figured out the
solution. Thought it might still be helpful for others.

I query my server via AJAX for some JSON data, and turn it into an
object. My first problem was that the "advanced optimizations" option
was changing the property names of my JSON object:

var result = eval(responseText);
alert(result.status);

was getting compiled to something like:

a = eval(b);
alert(a.c);

Of course the simple solution is to use a string for the property
name:

alert(result['status']);

That worked fine until I wanted to pass my result object into a
Closure Template function. Advanced optimizations were again changing
the property name within the template code, and I had no way to force
it to use a string name.

My solution was to create an extern file:

/**
* @constructor
*/
MyResult = function () {};

/** @type {string} */
MyResult.status;

and then change the code to:

var result = /** @type {MyResult } */ eval(responseText);
alert(result.status);

By including the extern file in the compilation with the --externs
flag, my problems were solved.

Note that the compiler is a little brain-dead when interpreting sub-
fields that are a record type. To continue with the extern file above:

/** @type {{color: string, weight: number}} */
MyResult.fruit;

If you try to pass result.fruit into a Closure template (or any
function for that matter), the color and weight properties will get
renamed. Instead you'll need this:

/** @type {MyFruitData} */
MyResult.fruit

/**
* @constructor
*/
MyFruitData = function () {};

/** @type {string} */
MyFruitData.color;

/** @type {number} */
MyFruitData.weight;

Hope this helps someone else out there!
Dave


--
Subscription settings: http://groups.google.com/group/closure-compiler-discuss/subscribe?hl=en

[Johannes]

Some more thoughts on this since I was also having that problem:

First, you can instruct Closure Templates to use the string syntax by
using {$asdf['asdf']} instead of {$asdf.asdf}. Not sure, if it's
recommend or if it's in the documentation, I just tried it out.

Second, instead of forcing the object properties to not be shortened,
you can also instruct your server-side to use the source map file
which is generated when compiling your code to get the names of the
new short property names, and send them to the client.

[Dave]

Didn't know about the template trick, but I like that second idea even
better. I ended up using some fairly short property names to keep the
size of the JSON down, but using the source map would be even better!

Dave


On Apr 18, 12:18 am, Johannes <johannes.schmitt...@googlemail.com>
wrote: