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 oluşturulmasına izin verir.

Sürüm notları

Söz dizimi

Mustache, mantık içermeyen bir şablon söz dizimidir. Daha ayrıntılı bilgi için Mustache.js dokümanlarına bakın. Temel Mustache etiketlerinden bazıları şunlardır:

• {{variable}}: Bir değişken etiketi. Bir değişkenin çıkış karakterli HTML değerini verir.
• {{#section}}{{/section}}: Bir bölüm etiketi. Bir değişkenin varlığını test edebilir ve bir dizi olması halinde testi tekrarlayabilir.
• {{^section}}{{/section}}: Ters çevrilmiş bir etiket. Bir değişkenin var olmayışını test edebilir.
• {{{unescaped}}}: Çıkış karaktersiz HTML. Sağlayabileceği işaretlemede kısıtlanmıştır (aşağıdaki "Kısıtlamalar" konusuna bakın).

Kullanım

amp-mustache şablonu, AMP Şablon Spesifikasyonu'na göre tanımlanmalı ve kullanılmalıdır.

Öncelikle amp-mustache şu şekilde beyan edilmeli/yüklenmelidir:

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

Daha sonra, Mustache şablonları bir script veya template etiketinde şu şekilde tanımlanabilir:

<!-- Şablon etiketi kullanma. -->
<template type="amp-mustache">
  Hello {{world}}!

veya

<script type="text/plain" template="amp-mustache">
  Hello {{world}}!
</script>

AMP doğrulaması yararlı dev-x ipuçları sağladığından, mümkün olan her yerde template etiketini kullanın. Uç durumlar ve tablo bağlamında şablon oluşturma sorunları için script şablonunu kullanın. Aşağıdaki "Tablolar" bölümüne bakın.

Şablonların nasıl keşfedileceğine, ne zaman oluşturulacağına ve verilerin nasıl sağlanacağına, içeriğini oluşturmak için bu şablonu kullanan hedef AMP öğesi (ör. bir amp-list, amp-form vb.) karar verir.

Kısıtlamalar

Doğrulama

Tüm AMP şablonları gibi amp-mustache şablonlarının da iyi biçimlendirilmiş DOM parçaları olmalıdır. Bu, diğer noktaların yanı sıra, amp-mustache etiketini şunlar için kullanamayacağınız anlamına gelir:

• Etiket adını hesaplama. Örneğin, <{{tagName}}> öğesine izin verilmez.
• Özellik adını hesaplama. Örneğin, <div {{attrName}}=something> öğesine izin verilmez.

"Üçlü mustache"ın sonucu yalnızca şu etiketlere izin verecek şekilde temizlenir: 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.

Temizleme

Mustache çıktısı, güvenlik nedenleriyle ve AMP'nin geçerliliğini korumak için temizlenir. Bu, belirli öğelerin ve özelliklerin haber verilmeden kaldırılmasına neden olabilir.

Güçlükler

İç içe yerleştirilmiş şablonlar

AMP Doğrulaması'na göre <template> öğeleri, diğer <template> öğelerinin alt öğeleri olmamalıdır. Bu durum, amp-list ve amp-form gibi, şablonları kullanan iki bileşen iç içe yerleştirilirken ortaya çıkabilir.

Bu sorunu geçici olarak çözmek için <template> öğeleri, bileşendeki template özelliği aracılığıyla id bilgilerine göre referans alınabilir. Örneğin:

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

Şu şekilde de gösterilebilir:

<!-- İç içe yerleştirmeyi önlemek için şablonları dışlama. -->
<template type="amp-mustache" id="myTemplate">
  <div>{{title}}</div>
</template>

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

Tablolar

AMP şablon dizelerinin <template> öğelerinde belirtilmesi gerektiğinden bu durum, tarayıcı ayrıştırması nedeniyle beklenmeyen davranışlara neden olabilir. Örneğin, <table> öğelerinin, metnin koruyucu üst öğesi olmasına neden olabilir. Aşağıdaki örnekte:

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

Tarayıcı, {{#foo}} ve {{/foo}} metin düğümlerinin koruyucu üst öğesi olur:

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

Geçici çözümler arasında Mustache bölümlerinin HTML yorumlarında sarmalanmasını (ör. <!-- {{#bar}} -->), bunun yerine <div> gibi tablo dışı öğelerin veya şablonlarınızı tanımlamak için bir <script type="text/plain"> etiketinin kullanılmasını içerir.

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

Çıkış karakterlerini alıntılama

Özellik değerlerini hesaplamak için amp-mustache kullanılırken çıkış karakterlerini alıntılama bir sorun olabilir. Örneğin:

<template type="amp-mustache">
<!-- foo değişkenindeki bir çift tırnak (") HTML'nin bozulmasına yol açar. -->
<amp-img alt="{{foo}}" src="example.jpg" width="100" height="100"></amp-img>

<!-- bar değişkenindeki bir tek tırnak (') veya çift tırnak (") AMP çalışma zamanı ayrıştırma hatasına neden olur. -->
<button on="tap:AMP.setState({foo: '{{bar}}'})">Click me</button>
</template>

Mustache HTML & çıkış karakterlerini kullanacağından (ör. " -> ") {{foo}} veya {{bar}} değişkenlerinde HTML karakter kodlarının kullanılması işe yaramaz. Bir geçici çözüm ise ′ (′) ve ″ (″) gibi tıpkı basım karakterlerin kullanılmasıdır.

Bunun yerine, bu değişikliğin amp-mustache içinde gerçekleştirilmesi için açık bir teklif vardır. Bu teklifi desteklemek isterseniz lütfen konu hakkında yorum yapın.

HTML varlıkları

HTML varlıkları, <template> öğelerinde korunmaz.

Kullanıcı tarafından oluşturulmuş metin içeren bir <template> öğesinin sunucu tarafında oluşturulmasını isterseniz, {{, }}, {{{, }}} içeren kullanıcı tarafından oluşturulmuş metin bir Mustache bölümü olarak işleneceğinden bir soruna neden olabilir. Örneğin, {{ karakterlerinin {{ HTML varlıklarıyla değiştirilmesi, tarayıcı <template> öğesini ayrıştırdığında bu varlıklar korunmayacağı için işe yaramaz.

Geçici çözümler, {{ gibi dizeleri farklı karakterlerle değiştirmeyi veya bunları kullanıcı tarafından oluşturulmuş içerikten bütünüyle ayırmayı içerir.

Doğrulama

AMP doğrulayıcı spesifikasyonundaki amp-mustache kurallarına bakın.