🔗 Ma’lumot va bog‘lash

Vidjet ko‘rinishi statik emas: matn, rasm va tugmalar ma’lumotga bog‘lanadi. Ma’lumot tuzilmasini sxema belgilaydi, qiymatlarni esa agent yoki API yetkazadi.

📐 Sxema

Sxema — JSON Schema ko‘rinishidagi kontrakt. U uch narsani boshqaradi:

• agent Vidjet ko‘rsatish funksiyasida qanday maydonlarni to‘ldirishini;
• kod yozayotganda qanday yo‘llar taklif qilinishini;
• ma’lumot tekshiruvini (majburiy maydonlar, turlar, enum).

{
  "type": "object",
  "properties": {
    "customer": { "type": "string" },
    "orders": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "title":  { "type": "string" },
          "total":  { "type": "number" },
          "status": { "type": "string", "enum": ["new", "shipping", "done"] }
        }
      }
    }
  },
  "required": ["orders"]
}

🧷 Bog‘lash sintaksisi

JSX ichida bog‘lash oddiy ifoda, saqlangan daraxtda esa ikki jingalak qavs ichidagi yo‘l:

• value={customer} → "{{customer}}"
• value={order.total} → "{{order.total}}" — nuqtali yo‘l.
• label={orders[0].status} — indeks bo‘yicha murojaat.
• value={orders.length} — massiv uzunligi.

Agar xossa faqat bitta bog‘lashdan iborat bo‘lsa, qiymat turi saqlanadi (massiv massiv bo‘lib qoladi). Matn bilan aralashsa, natija satrga aylanadi:

<Title value={order.title} />        → "{{order.title}}"
<Text value={"$" + order.total} />    → "${{order.total}}"

🔁 Massivlar bo‘yicha aylanish

Ro‘yxatlar .map() bilan yoziladi va daraxtda Repeat tuguniga aylanadi:

<Card gap={2}>
  {orders.map(order => (
    <Row align="center" gap={2}>
      <Text value={order.title} />
      <Spacer />
      <Badge label={order.status} />
    </Row>
  ))}
</Card>

• Element order nomi bilan bog‘lanadi.
• Element tartibi orderIndex nomida turadi (element nomi + Index).
• Bir nechta tugun qaytarish uchun <>…</> ishlatiladi.

🧮 Ma’lumot qayerdan keladi

API javobi  >  funksiya (amal) ma’lumoti  >  Default misol  >  sxemadan bo‘sh qiymatlar

• Vidjet ko‘rsatish amalida ma’lumotni agent sxema asosida to‘ldiradi.
• API chaqirish + vidjet amalida ma’lumot endpoint javobidan olinadi va kerak bo‘lsa javobni moslashtirish orqali qayta joylashtiriladi.
• Forma maydonlari (Input, Select …) o‘z name kaliti bo‘yicha o‘sha ma’lumotga yozadi.
• set_variables funksiyasi ham shu ma’lumotni brauzer tomonida o‘zgartiradi.

⚠️ E’tibor bering

• Bog‘langan yo‘l topilmasa, joy bo‘sh qoladi — vidjet buzilmaydi.
• Default jonli ma’lumot ustidan yozmaydi; u faqat muharrirda ko‘rinadi.
• Mehmon formaga kiritgan qiymatlar faqat brauzerda turadi. Ularni serverga yuborish uchun funksiyaning qo‘shimcha kiritmalari ro‘yxatiga qo‘shing.