How to dynamically add a new line to the string stored in the AMP state?

Question

I'm learning to work with the Accelerated Mobile Pages. I want to add a new line and some text content to a string, stored in the amp-state , when the user presses button. So I have tried this:

 <script src="https://cdn.ampproject.org/v0.js"></script> <script src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> <amp-state id="formState"> <script type="application/json"> { "message": "Some text" } </script> </amp-state> <textarea [text]="formState.message"></textarea> <button type="button" on="tap:AMP.setState({formState: {message: formState.message + '\\nSome another text'} })"> Button </button> 

Unfortunately, it seems that it somehow escapes the \\ character. So I literally got Some text\\nSome another text in the textarea .

I have tried String.fromCharCode and so on, but it is prohibited in the AMP... got stuck with this.

I can't find much documentation on this use case, so asking here: is there any way to dynamically add a new line to the string, stored in the amp-state , on the user interaction?

Answer 1

Define the newline:

<amp-state id="formState">
  <script type="application/json">
  {
    "message": "Some text",
    "newLine": "\n"
  }
  </script>
</amp-state>

then:

 on="tap:AMP.setState({formState: {message: formState.message + formState.newLine + 'asdf'} })">