O documento descreve como criar componentes interativos em páginas AMP usando a tag <amp-bind>. A tag <amp-bind> permite criar estado mutável e vinculá-lo a elementos da página através de expressões, permitindo interações complexas sem usar JavaScript customizado. O estado é definido usando <amp-state> e pode ser atualizado com AMP.setState ou AMP.pushState.
3. AMP HTML
É basicamente HTML estendido com propriedades AMP personalizadas
AMP JS
Biblioteca JS que implementa todas as melhores práticas de desempenho
da AMP, gerencia o carregamento de recursos e fornece as tags
personalizada
AMP CACHE
O Google AMP Cache é uma rede de entrega de conteúdo baseada em proxy
para entregar todos os documentos válidos de AMP.
11. State
<amp-state id="myState">
<script type="application/json">
{ myText: "Hello AMP" }
</script>
</amp-state>
<span [text]="myState.myText">
Hello World
</span>
Para melhor desempenho e
evitar saltos de conteúdo na
página, o amp-bind não
avalia expressões no
carregamento da página.
18. Expressions
➔ Não têm acesso as globais como
document e window
➔ Variáveis undefined e array-index-out-of-
bounds retornam NULL em vez de
undefined ou throw error
20. String
charAt charCodeAt concat
indexOf lastIndexOf slice
split substr substring
toLowerCase toUpperCase
Number
toExponential toFixed
toPrecision toString
Objects
keys value
Array
concat filter includes
indexOf join lastIndexOf
map reduce slice some sort
splice
Math
abs ceil floor max min
random round
Global
encodeURIComponent
22. Expressões podem ser
reutilizadas definindo um
amp-bind-macro.
<amp-bind-macro id="circle"
arguments="r"
expression="3.14 * r * r" />
Reutilizando Expressions
25. Binding
São atributos [property] que
vinculam a propriedade de
um elemento a uma
expressão.
<input type="checkbox"
[checked]="selecteds._1177"
[disabled]="checkeds == 4">