dokümanlar / data-binding

Dinamik rotalar ve veri

İstek verilerini çözümleyin ve API sonuçlarını sunucuda tekrarlayın.

Request veya Repeat seçin

Bir uç nokta tek nesne döndürdüğünde Request bloğu kullanın. Bir listenin her öğesi için bir görsel alt ağaç oluşturulması gerektiğinde Repeat bloğu kullanın. Yayımlanmış sayfalardaki istekler, HTML döndürülmeden önce sunucuda çözümlenir.

Rota ve sorgu değerlerini kullanın

Sayfa kısa adı, blog/:slug gibi adlandırılmış parametreler içerebilir. Eşleşen değerleri yayımlanmış sayfa bağlamına aktarın:

ts
{
  params: { slug: "introducing-pagiera" },
  query: { preview: "true" },
  page: { slug: "blog/:slug" }
}

İstek URL'lerinde, başlıklarında veya gövdelerinde bu değerlere başvurun:

text
https://api.example.com/posts/{{params.slug}}
https://api.example.com/search?q={{query.q}}

Döndürülen alanları bağlayın

Metinleri, görselleri, bağlantıları ve görünürlük kurallarını isteğin döndürdüğü alanlara bağlayın. Repeat bloklarında tekrarlanan her alt ağaç, geçerli öğeyi yerel veri bağlamı olarak alır.

Liste yanıtın içindeyse kaynağın List path alanını ona ayarlayın. Yollar noktalı (items, data.results) ya da JSONPath biçiminde ($.items, items[0].tags, $["items"]) yazılabilir; baştaki $ yanıtın kendisidir. Send'den sonra tek bir nesne olan yanıt, içindeki dizileri listeler — örneğin GitHub arama API'si items önerir — ve birini seçmek yolu ayarlayıp satırlarını yükler.

Bağlanan değerleri biçimlendirme

Bağlanan bir alan, biçim verilmedikçe geldiği gibi görünür. Data binding altında bir alan seçildiğinde Format onu tarihe (24 Ekim 2026 gibi hazır biçimler ya da d MMMM yyyy, HH:mm gibi bir kalıp), sayıya veya para birimine çevirir ya da harf durumu ve uzunluk sınırıyla metin olarak bırakır. Before ve After boş olmayan değeri sarar; If empty alan yoksa, null, boş metin ya da boş liste ise gösterilir. Dil ve saat dilimi biçimle birlikte saklanır; böylece canvas, sunucu ve her ziyaretçi aynı metni yazar.

Request veya Repeat içindeki metin de alanları cümleye katabilir; {{…}} borular ve ifadeler alır:

text
Yazar: {{author.name | default:"Anonim"}}
{{published_at | date:"d MMMM yyyy" | locale:tr-TR | tz:Europe/Istanbul}}
{{price | currency:TRY | locale:tr-TR}}
{{status | map:draft=Taslak,published=Yayında,*=Bilinmiyor}}
{{status == "draft" ? "Taslak" : "Yayında"}}
{{title.replace("-", " ").toUpperCase()}}
{{tags.map(t => t.name).join(", ")}}
{{items.find(i => i.type == "main")?.price ?? "—"}}

Borular: date, number, currency, upper, lower, capitalize, truncate, prefix, suffix, locale, tz, map, replace ve default. İfadeler JavaScript'e benzer ama yorumlanır, hiçbir zaman çalıştırılmaz: satırın alanlarını okur, + - * / % == != < > && || ?? ! ?: işleçlerini ve güvenli zinciri kullanır, sabit bir metin ve liste yöntemleri kümesini (replace, split, slice, map, filter, find, join, …) ve Math.*, String, Number, date, number, upper, lower, len, default yardımcılarını çağırır. Global nesnelere, prototiplere ya da sunucuya ulaşamaz; her değerlendirme adım ve çıktı boyutuyla sınırlıdır, hata veren ifade boş görünür. {{params.…}}, {{query.…}} ve {{page.…}} sayfa değişkeni olarak anlamlarını korur.

Yüklemeyi ve hataları ele alın

Sunucuda oluşturulan yayımlanmış çıktı için istemci tarafında bir yükleme aşaması yoktur. Boş ve hata durumlarını açıkça tasarlayın. Veri kaynağı page-404 davranışını kullanıyorsa uzak kaynaktan gelen bir 404, rotanın tamamını 404 yanıtına dönüştürebilir.

Sayfaları dizine eklenebilir tutun

Temel içeriği, istemcide etkileşimlerin bağlanmasından sonra çalışan bir efekte taşımayın. “Sayfa kaynağını görüntüle” veya bir HTTP isteğiyle başlıkların, açıklamaların ve birincil sayfa metninin döndürülen HTML'de bulunduğunu doğrulayın.