ampproject / amphtml

The AMP web component framework.
https://amp.dev
Apache License 2.0
14.9k stars 3.89k forks source link

amp-mustache: Custom delimiters #12994

Open kswang2400 opened 6 years ago

kswang2400 commented 6 years ago

What's the issue?

We are getting unescaped Mustache template syntax errors in from the AMP validator but there doesn't seem to be an obvious solution for escaping curly braces. We've tried several replaces (i.e. { { { { '\{', '\\{') and none of them seem to work

The attribute 'alt' in tag 'amp-img' is set to '{{{{{Hello}}}}} {{{{{World}}}}}', which contains unescaped Mustache template syntax.

The docs don't reference escaping characters and the tests don't seem to accounting for this edge case.

https://www.ampproject.org/docs/reference/components/amp-mustache https://ampbyexample.com/components/amp-mustache/ amphtml/extensions/amp-mustache/0.1/test/test-amp-mustache.js

What browsers are affected?

All browsers

Which AMP version is affected?

1516337355291

cpapazian commented 6 years ago

to clarify, the issue that we are having is that it is not clear how to escape mustache syntax. looking at the docs for mustache, their recommendation is to use Custom Delimiters:

If you want {{name}} not to be interpreted as a mustache tag, but rather to appear exactly as {{name}} in the output, you must change and then restore the default delimiter. See the Custom Delimiters section for more information.

but custom delimiters are not supported in AMP. Other than stripping this markup altogether, we don't see a way forward.

dreamofabear commented 6 years ago

We can look into supporting a different delimiter. One possible workaround in the meantime is to pass curly brace character in your JSON data and render it with your other templated data.

ampprojectbot commented 6 years ago

This issue hasn't been updated in awhile. @choumx Do you have any updates?

alankent commented 6 years ago

I have hit this problem as well. I am trying to use Nuxt.js to generate AMP pages (an experiment). One of the things that is going wrong is Nuxt.js uses mustache to do templating as well. So I cannot have a