amp-mustache

0.2 0.1

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

Mustache.js의 렌더링을 허용합니다.

버전 참고사항

구문

Mustache는 로직이 없는 템플릿 구문입니다. 자세한 내용은 Mustache.js 문서를 참조하세요. 핵심 Mustache 태그 중 일부는 다음과 같습니다.

• {{variable}}: 변수 태그입니다. 변수의 HTML-이스케이프 값을 출력합니다.
• {{#section}}{{/section}}: 섹션 태그입니다. 변수가 있는지 테스트하고 변수가 배열이면 테스트를 반복합니다.
• {{^section}}{{/section}}: 역 태그입니다. 변수가 없는지 테스트합니다.
• {{{unescaped}}}: 이스케이프되지 않은 HTML입니다. 출력할 수 있는 마크업에 제한이 있습니다(아래 '제한사항' 참조).

사용

AMP 템플릿 사양에 따라 amp-mustache 템플릿을 정의하고 사용해야 합니다.

먼저 amp-mustache를 선언/로드해야 합니다.

<script src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" async="" custom-template="amp-mustache"></script>

그리고 나서 다음과 같이 script 또는 template 태그로 Mustache 템플릿을 정의할 수 있습니다.

<!-- Using template tag. -->
<template type="amp-mustache">
  안녕하세요 {{world}}
</template>

또는

<script type="text/plain" template="amp-mustache">
  안녕하세요  {{world}}!
</script>

AMP 유효성 검사기에서 유용한 dev-x 힌트를 제공하므로 가능할 때마다 template 태그를 사용합니다. 표 컨텍스트에서 템플릿을 생성하는 것과 관련된 문제와 예외 사례에는 script 템플릿을 사용합니다. 자세한 정보는 아래 '표' 섹션을 참조하세요.

템플릿 탐색 방법, 템플릿 렌더링 시기, 데이터 제공 방식은 모두 이 템플릿을 사용하여 콘텐츠를 렌더링(예: amp-list, amp-form 등에서)하는 타겟 AMP 요소를 통해 결정합니다.

제한사항

유효성 검사

모든 AMP 템플릿과 마찬가지로 amp-mustache 템플릿은 올바른 형식의 DOM 단편이어야 합니다. 즉, 무엇보다도 amp-mustache를 사용하여 다음을 할 수 없습니다.

• 태그 이름 계산. 예: <{{tagName}}>은 허용되지 않습니다.
• 속성 이름 계산. 예: <div {{attrName}}=something> 은 허용되지 않습니다.

'triple-mustache'의 출력은 다음 태그만 허용하도록 정리됩니다. a, b, br, caption, colgroup, code, del, div, em, i, ins, li, mark, ol, p, q, s, small, span, strong, sub, sup, table, tbody, time, td, th, thead, tfoot, tr, u, ul.

정리

Mustache 출력은 보안상의 이유 및 AMP 유효성을 유지하기 위해 정리됩니다. 따라서 특정 요소와 속성이 자동으로 삭제될 수 있습니다.

일반적인 문제

중첩된 템플릿

각각의 AMP 유효성 검사에서 <template> 요소는 다른 <template> 요소의 하위 요소가 아니어야 합니다. 이 문제는 템플릿을 사용하는 두 구성요소를 중첩할 때 발생할 수 있습니다(예: amp-list 및 amp-form).

이 문제를 임시로 해결하기 위해 구성요소의 <template> 속성을 통해 id에서도 template 요소를 참조할 수 있습니다. 예:

<amp-list id="myList" src="https://foo.com/list.json">
  <template type="amp-mustache">
    <div>{{title}}</div>
  </template>
</amp-list>

다음으로도 표현할 수 있습니다.

<!-- Externalize templates to avoid nesting. -->
<template type="amp-mustache" id="myTemplate">
  <div>{{title}}</div>
</template>

<amp-list id="myList" src="https://foo.com/list.json" template="myTemplate">
</amp-list>

표

AMP 템플릿 문자열은 <template> 요소에 지정해야 하므로 브라우저 파싱 시 예상치 못한 동작이 발생할 수 있습니다. 예를 들어 <table> 요소를 사용하면 텍스트의 상위 요소 지원이 발생하기도 합니다. 다음 예를 참조하세요.

<template type="amp-mustache">
  <table>
    <tr>
      {{#foo}}<td></td>{{/foo}}
    </tr>
  </table>
</template>

브라우저에서 {{#foo}}와 {{/foo}} 텍스트 노드의 상위 요소를 지원합니다.

{{#foo}}
{{/foo}}
<table>
  <tr>
    <td></td>
  </tr>
</table>

임시 해결책으로는 Mustache 섹션을 HTML 주석문(예: <!-- {{#bar}} -->)으로 래핑하거나 <div>와 같이 표가 아닌 요소를 대신 사용하거나 <script type="text/plain"> 태그를 사용하여 템플릿을 정의하는 방법이 있습니다.

<script type="text/plain" template="amp-mustache">
  <table>
    <tr>
      {{#foo}}<td></td>{{/foo}}
    </tr>
  </table>
</script>

인용부호 이스케이프

amp-mustache를 사용하여 속성 값을 계산할 때 인용 부호 이스케이프가 문제가 될 수 있습니다. 예:

<template type="amp-mustache">
  <!-- A double-quote (") in foo will cause malformed HTML. -->
  <amp-img alt="{{foo}}" src="example.jpg" width=100 height=100></amp-img>

  <!-- A single-quote (') or double-quote (") in bar will cause an AMP runtime parse error. -->
  <button on="tap:AMP.setState({foo: '{{bar}}'})">Click me</button>
</template>

Mustache에서 & 문자를 HTML 이스케이프 처리하므로(예: " -> "), {{foo}} 또는 {{bar}} 변수에서 HTML 문자 코드를 사용할 수 없습니다. 임시 해결 방법은 복제 문자(예: ′(′) 및 ″(″))를 사용하는 것입니다.

대신 amp-mustache에서 이 대체를 해결하기 위한 공개 제안이 있습니다. 이 문제를 지원하고 싶다면 이 문제에 관한 의견을 주세요.

HTML 개체

HTML 개체는 <template> 요소에서 유지되지 않습니다.

{{, }}, {{{, }}}를 포함하는 사용자 제작 텍스트가 Mustache 섹션으로 처리되므로, 사용자 제작 텍스트를 포함하는 <template>을 서버 측에서 렌더링하려는 경우 문제가 될 수 있습니다. 예를 들어 {{를 HTML 개체 {{로 교체하는 작업은 브라우저에서 <template>을 파싱할 때 이 개체가 유지되지 않으므로 작동하지 않습니다.

{{와 같은 문자열을 다른 문자로 교체하거나 사용자 제작 콘텐츠에서 완전히 제거하는 해결 방법도 있습니다.

유효성 검사

AMP 유효성 검사기 사양에서 amp-mustache 규칙을 참조하세요.