Reaktivita

Úvod

Živá ukážka je cenová ponuka: produkt, množstvo, destinácia a voliteľný kupón. Jadro dotapp.js už má variable, databind a computed. Riadok položky sa aktualizuje v prehliadači. DPH, doprava, sklad a pravidlá kupónu ostávajú v PHP a vracajú sa cez to isté bezpečné $dotapp().load() ako pri zoznamoch a formulároch.

To je celá slučka: katalóg a sadzby na serveri, ajaxReply na drôte, premenné v prehliadači. Prázdne pruhy #error-message / #status ostávajú skryté, kým PHP naozaj nemá chybu alebo info riadok.

variable, databind, computed

$dotapp().variable("qty", "1");
$dotapp().variable("name", "Workshop seat");
$dotapp().variable("unit", "49.00");
$dotapp().variable("total", "0.00");

var qty = $dotapp().getVariable("qty");
var total = $dotapp().getVariable("total");
total.bindToElement(document.getElementById("bindTotal"));

var line = $dotapp().computed(function () {
  var q = $dotapp().getVariable("qty").value;
  var n = $dotapp().getVariable("name").value;
  var u = $dotapp().getVariable("unit").value;
  return q + " × " + n + " @ €" + u;
});

qty.onChange(function () {
  line.invalidate();
  document.getElementById("bindLine").textContent = line.value;
});

// after parseReply:
total.value = String(reply.total);

Priradenie .value na singleton premennej aktualizuje každý prvok naviazaný cez bindToElement / databind na tej istej inštancii $dotapp(). Premenné sa nezdieľajú medzi klonmi $dotapp('#x'). Naviažte cez $dotapp().getVariable('total').bindToElement(el).

Pole kupónu používa obojsmernú väzbu s { live: true }, takže písanie aktualizuje premennú na input a nasleduje debounceované load().

Cenová ponuka z PHP

POST s CRC. Počas požiadavky zakryte ponuku. Payload zapíšte do premenných — celú kartu nemeňte, kým nepotrebujete fragment.

$dotapp().load(quoteUrl, "POST", { id: encId, qty: qty, country: country, coupon: coupon },
  function (raw) {
    var reply = $dotapp().parseReply(raw);
    total.value = String(reply.total);
    stock.value = String(reply.stock);
    if (reply.error) $dotapp("#error-message").attr("hide", "false").html(reply.error);
    else if (reply.message) $dotapp("#status").attr("hide", "false").html(reply.message);
    else {
      $dotapp("#error-message").attr("hide", "hide").html("");
      $dotapp("#status").attr("hide", "hide").html("");
    }
  }
);

PHP dešifruje id produktu, uplatní DPH podľa krajiny, dopravu (zadarmo nad 80 € pri fyzickom tovare), sklad a kupón DOTAPP10. DSM počíta, koľkokrát táto relácia naozaj vyžiadala ponuku:

$sku = Crypto::decrypt($id, 'Examples.live.id');
$dsm = DSM::use('Examples');
$hits = (int) ($dsm->get('live_quotes') ?? 0);
$hits++;
$dsm->set('live_quotes', $hits);
return DotApp::DotApp()->ajaxReply([
    'status' => 1,
    'total' => $total,
    'stock' => $stock,
    'error' => $error,
    'message' => $message,
    'hits' => $hits,
], 200);

Vypredané a zlý kupón idú do červeného pruhu. Platný kupón alebo doprava zadarmo idú do modrého. Oba ostávajú hide="hide", kým sa to nestane.

Oficiálny reactive doplnok

Voliteľný dotapp.reactive.js pridáva HTML atribúty (reactive-api, reactive-interval, reactive-trigger, reactive-variable, reactive-template) a $dotapp().reactive(url, config). Načítajte ho po dotapp.js, keď vaša inštalácia servíruje /assets/dotapp/dotapp.reactive.js. Živá ukážka na tomto webe používa jadrové API, aby vždy bežala: už sú vnútri dotapp.js.

<div reactive-api="/shop/live" reactive-method="GET"
     reactive-interval="5000" reactive-variable="stock"></div>

Živá ukážka

/documentation/examples/run/live — živá ponuka, naviazané súčty, computed riadok, správy ku kupónu a skladu. Súbory: Controllers/Live.php, live.view.php, live.js.