Daftar isi

Bekerja dengan data jarak jauh

Bagaimana jika data Anda yang dapat diikat terlalu besar atau kompleks untuk diambil saat halaman dimuat? Atau bagaimana jika setiap SKU memiliki harga yang membutuhkan waktu yang lama untuk mencarinya? Mencari harga SKU untuk item yang tidak dilihat adalah pekerjaan yang sia-sia.

<amp-state> mendukung pengambilan data jarak jauh melalui atribut srcmiliknya, yang mengambil JSON dari titik akhir (endpoint) CORS. Pengambilan ini dilakukan sekali dan saat pemuatan halaman serta berguna untuk memastikan kesegaran data (khususnya jika disajikan dari cache).

Anda juga dapat mengikat atribut src untuk elemen <amp-state>. Hal ini berarti tindakan pengguna dapat memicu pengambilan data JSON jarak jauh ke status halaman yang dapat diikat.

Mengambil ukuran baju yang tersedia

Mari kita manfaatkan kemampuan pengambilan data jarak jauh untuk mencari harga SKU di contoh. Server pengembangan Express.js di app.js telah memiliki titik akhir /shirts/sizesAndPrices?shirt=<sku> yang, jika diberi SKU kemeja, menampilkan ukuran yang tersedia dan harga untuk setiap ukuran. Server pengembangan ini mengirimkan respons dengan penundaan buatan selama satu detik untuk menirukan latensi jaringan.

Permintaan	Respons
`GET /shirts/sizesAndPrices?sku=1001`	`{"1001: {"sizes": {"XS": 8.99, "S" 9.99}}}`

Serupa dengan data JSON dalam elemen <amp-state>, data jarak jauh yang ditampilkan dari pengambilan ini digabungkan dan tersedia di atribut id elemen. Contoh: data yang ditampilkan dari contoh respons di atas dapat diakses dalam ekspresi:

Ekspresi	Hasil
`shirts['1001'].sizes['XS']`	`8.99`

Mengikat data

Sekarang, mari kita terapkan hal ini ke contoh niaga-e (e-commerce). Pertama-tama, ambil data baju ini ketika SKU baru dipilih. Tambahkan pengikatan [src] ke elemen amp-state#shirts:

<!-- When `selected.sku` changes, update the `src` attribute and fetch
     JSON at the new URL. Then, merge that data under `id` ("shirts"). -->
<amp-state
  id="shirts"
  [src]="'/shirts/sizesAndPrices?sku=' + selected.sku"
></amp-state>

Menunjukkan ukuran yang tidak tersedia

Selanjutnya, mari tandai dengan jelas ukuran yang tidak tersedia untuk SKU tertentu. Kelas CSS "unavailable" menambahkan garis diagonal pada elemen -- kita dapat menambahkannya ke elemen dalam amp-selector yang terkait dengan ukuran yang tidak tersedia:

<amp-selector name="size">
  <table>
    <tr>
      <!-- If 'XS' size is available for selected SKU, return empty string.
           Otherwise, return 'unavailable'. -->
      <td [class]="shirts[selected.sku].sizes['XS'] ? '' : 'unavailable'">
        <div option="XS">XS</div>
      </td>
      <td [class]="shirts[selected.sku].sizes['S'] ? '' : 'unavailable'">
        <div option="S">S</div>
      </td>
      <td [class]="shirts[selected.sku].sizes['M'] ? '' : 'unavailable'">
        <div option="M">M</div>
      </td>
      <td [class]="shirts[selected.sku].sizes['L'] ? '' : 'unavailable'">
        <div option="L">L</div>
      </td>
      <td [class]="shirts[selected.sku].sizes['XL'] ? '' : 'unavailable'">
        <div option="XL">XL</div>
      </td>
    </tr>
  </table>
</amp-selector>

Sekarang, muat ulang halaman dan cobalah. Memilih SKU baru (warna baju) akan menyebabkan ukuran yang tidak tersedia dicoret (setelah penundaan singkat).

Menentukan status awal

Namun ada sedikit masalah -- bagaimana dengan baju hitam, yaitu warna standar yang dipilih? Kita perlu menambahkan data ukuran dan harga baju hitam ke amp-state#shirts karena amp-bind hanya akan berjalan sebagai tanggapan terhadap tindakan pengguna yang eksplisit:

<amp-state id="shirts" [src]="'/shirts/sizesAndPrices?sku=' + selected.sku">
  <script type="application/json">
    {
      "1001": {
        "color": "black",
        "image": "./shirts/black.jpg",
        "sizes": {
          "XS": 8.99,
          "S": 9.99
        }
      },
<!-- ... -->

Selain itu, kita perlu memperbarui status standar elemen yang relevan:

<amp-selector name="size">
  <table>
    <tr>
      <!-- If 'XS' size is available for selected SKU, return empty string.
           Otherwise, return 'unavailable'. -->
      <td [class]="shirts[selected.sku].sizes['XS'] ? '' : 'unavailable'">
        <div option="XS">XS</div>
      </td>
      <td [class]="shirts[selected.sku].sizes['S'] ? '' : 'unavailable'">
        <div option="S">S</div>
      </td>
      <!-- Add the 'unavailable' class to the next three <td> elements
           to be consistent with the available sizes of the default SKU. -->
      <td
        class="unavailable"
        [class]="shirts[selected.sku].sizes['M'] ? '' : 'unavailable'"
      >
        <div option="M">M</div>
      </td>
      <td
        class="unavailable"
        [class]="shirts[selected.sku].sizes['L'] ? '' : 'unavailable'"
      >
        <div