Temel kavramlar

bindings

Bileşenin bağları: JSX'teki canlı ifadelerin karşılığı, `bindings` üyeleri, `watch` ve bağın ömrü.

Bir bağ, reaktif bir değeri bileşenin elemanına bağlar: metne, bir özniteliğe, alanın değerine, görünürlüğe ya da içeriğe. Değer değişince yalnız o bağ yeniden çalışır; bileşenin geri kalanı yeniden kurulmaz. Her bileşenin bağları bindings koleksiyonundadır. JSX'te yazılan her canlı ifade, o etiketin bileşeninde bir bağ olur; JSX'siz yazımda aynı bağ bindings üzerinden kurulur.

JSX'teki karşılıkları

JSX	Kurulan bağ
`<span>{() => note.title.trim() \\|\\| "Adsız"}</span>`	`bindings.method(fn)`; sonuç metinse metin düğümü, bileşense içerik olur. Yalnız metin için `bindings.text(fn)` yazılır.
`<span>{note.title}</span>`	`bindings.add("textContent", note, "title")`: tek alana tek yönlü bağ.
`x-text={() => …}`	`bindings.text(fn)`.
`value={() => state.query}`, `x-value={() => state.query}`	`bindings.add("value", fn)` ve `bindings.value(fn)`; ikisi aynı işi yapar.
`x-model={() => state.query}`	`bindings.model(() => state.query, (value) => (state.query = value))`: iki yönlü.
`x-display={() => note.pinned}`	`bindings.display(fn)`, `preconfig` içinde.
`x-wait={() => notes.loading}`	`bindings.wait(fn)`, `preconfig` içinde.
`x-html={() => preview}`	`bindings.html(fn)`.
`{open && <Panel />}`	`bindings.when(fn, render)`.
`{open ? <A /> : <B />}`	`bindings.ternary(fn, a, b)`.
`{notes.map((note) => <NoteRow note={note} />)}`	`bindings.list(fn, render)`.
`x-watch={() => …}`	`bindings.watch(fn)`, etiket kurulurken.

Öznitelik ve sınıf bağları (class={() => …}, disabled={() => …}) bindings'te değil, class.add ve attr.add ile kurulur (bkz. Görünüş).

Üyeler

Üye	Ne yapar
`text(fn)`, `value(fn)`	Elemanın metnini ya da değerini fonksiyonun sonucuna bağlar.
`add(özellik, kaynak, alan?)`	Elemanın ya da bileşenin bir özelliğini bir nesnenin alanına ya da bir fonksiyona bağlar (bkz. Bileşenin özelliğine bağ).
`model(getter, setter)`	İki yönlü bağ: değer elemana yazılır, kullanıcının girdisi `setter`'a gider. `input`, `select` ve `textarea`'da çalışır.
`display(fn)`, `wait(fn)`	`display` fonksiyon `true` iken gösterir; `wait` fonksiyon `true` döndürdükçe bileşeni kurmadan bekletir (bkz. `x-wait`).
`html(fn)`	Elemanın `innerHTML`'ini bağlar; içerik güvenilir olmalıdır (bkz. `x-html`).
`when(fn, render)`, `ternary(fn, a, b)`, `switchCase(fn, durumlar, varsayılan?)`	Koşula göre içeriği değiştirir; dal değişmedikçe yeniden kurulmaz.
`list(fn, render)`	Diziyi satırlara çevirir; satırlar öğe nesnesiyle eşleşir, sıra değişince taşınır. `loop` aynıdır.
`method(fn)`	Sonucu metin ya da bileşen olabilen ifade; JSX'teki `{() => …}` budur.
`watch(fn)`	Elemana bir şey yazmayan bağ: `fn` hemen bir kez, sonra okuduğu değerler değiştikçe çalışır (bkz. Bileşene bağlı izleyici).
`remove(bağ)`, `clear()`	Bir bağı ya da koleksiyondaki bütün bağları durdurup çıkarır. `watch`, `when`, `ternary`, `switchCase` ve `method` koleksiyonda tutulmaz; onlar bileşenle birlikte durur.
`items`	Koleksiyondaki bağların kopyası.

when, ternary, switchCase ve list'in ayrıntıları Koşullu Gösterim ve Listeler sayfasındadır.

Bir örnek

Not sayfasının bilgi satırı notun ne zaman düzenlendiğini, adresini ve durumunu gösterir. Düzenlenme zamanı canlı metindir; adres not değişmediği için bir kez yazılır. "Sabitlendi", "Arşivde" ve "Kaydedildi" görünürlük bağıdır. Satır ayrıca tarayıcı sekmesinin başlığını notun başlığına bağlar: bindings.watch elemana bir şey yazmaz, yalnız okuduğu başlık değişince yeniden çalışır ve bileşen kaldırılınca durur. saved ebeveynden canlı bir değer olarak gelir:

import { Component, read, type Bind } from "@motifx/core";
import type { Note } from "../services/notes";

export class NoteMeta extends Component<HTMLDivElement, { note: Note; saved: Bind<boolean> }> {
  override onConfigured() {
    this.class.add("meta");
  }

  override onBuilt() {
    const { note } = this.props;
    this.bindings.watch(() => {
      document.title = `${note.title.trim() || "Adsız"} · Notlar`;
    });
  }

  override view() {
    const { note, saved } = this.props;
    return (
      <>
        <span>{() => `Düzenlendi ${new Date(note.updatedAt).toLocaleString("tr-TR")}`}</span>
        <span>{`/notes/${note.id}`}</span>
        <span x-display={() => note.pinned}>Sabitlendi</span>
        <span x-display={() => note.archived}>Arşivde</span>
        <span class="saved" x-display={() => read(saved)}>Kaydedildi</span>
      </>
    );
  }
}

import { Component, ComponentBase, motifComponent, motifFragment, read, type Bind } from "@motifx/core";
import type { Note } from "../services/notes";

export class NoteMeta extends Component<HTMLDivElement, { note: Note; saved: Bind<boolean> }> {
  static override elementTag = "div";

  override onConfigured() {
    this.class.add("meta");
  }

  override onBuilt() {
    const { note } = this.props;
    this.bindings.watch(() => {
      document.title = `${note.title.trim() || "Adsız"} · Notlar`;
    });
  }

  override view() {
    const { note, saved } = this.props;
    const edited = motifComponent("span", (span: ComponentBase) => span.bindings.text(() => `Düzenlendi ${new Date(note.updatedAt).toLocaleString("tr-TR")}`));
    const address = motifComponent("span", (span: ComponentBase) => span.setText(`/notes/${note.id}`));
    const pinned = motifComponent("span", {
      preconfig: (span: ComponentBase) => span.bindings.display(() => note.pinned),
      initializeComponent: (span: ComponentBase) => span.setText("Sabitlendi"),
    });
    const archived = motifComponent("span", {
      preconfig: (span: ComponentBase) => span.bindings.display(() => note.archived),
      initializeComponent: (span: ComponentBase) => span.setText("Arşivde"),
    });
    const savedLabel = motifComponent("span", {
      preconfig: (span: ComponentBase) => span.bindings.display(() => read(saved)),
      initializeComponent: (span: ComponentBase) => {
        span.class.add("saved");
        span.setText("Kaydedildi");
      },
    });
    return motifFragment({ childs: [edited, address, pinned, archived, savedLabel] });
  }
}

import { read, type Bind, type ComponentBase } from "@motifx/core";
import type { Note } from "../services/notes";

export function NoteMeta(props: { note: Note; saved: Bind<boolean> }) {
  const { note, saved } = props;
  const built = (meta: ComponentBase) => {
    meta.bindings.watch(() => {
      document.title = `${note.title.trim() || "Adsız"} · Notlar`;
    });
  };

  return (
    <div class="meta" onBuilt={built}>
      <span>{() => `Düzenlendi ${new Date(note.updatedAt).toLocaleString("tr-TR")}`}</span>
      <span>{`/notes/${note.id}`}</span>
      <span x-display={() => note.pinned}>Sabitlendi</span>
      <span x-display={() => note.archived}>Arşivde</span>
      <span class="saved" x-display={() => read(saved)}>Kaydedildi</span>
    </div>
  );
}

import { ComponentBase, motifComponent, read, type Bind } from "@motifx/core";
import type { Note } from "../services/notes";

export function NoteMeta(props: { note: Note; saved: Bind<boolean> }) {
  const { note, saved } = props;
  const built = (meta: ComponentBase) => {
    meta.bindings.watch(() => {
      document.title = `${note.title.trim() || "Adsız"} · Notlar`;
    });
  };

  return motifComponent("div", {
    class: "meta",
    onBuilt: built,
    initializeComponent: (meta: ComponentBase) => {
      const edited = motifComponent("span", (span: ComponentBase) => span.bindings.text(() => `Düzenlendi ${new Date(note.updatedAt).toLocaleString("tr-TR")}`));
      const address = motifComponent("span", (span: ComponentBase) => span.setText(`/notes/${note.id}`));
      const pinned = motifComponent("span", {
        preconfig: (span: ComponentBase) => span.bindings.display(() => note.pinned),
        initializeComponent: (span: ComponentBase) => span.setText("Sabitlendi"),
      });
      const archived = motifComponent("span", {
        preconfig: (span: ComponentBase) => span.bindings.display(() => note.archived),
        initializeComponent: (span: ComponentBase) => span.setText("Arşivde"),
      });
      const savedLabel = motifComponent("span", {
        preconfig: (span: ComponentBase) => span.bindings.display(() => read(saved)),
        initializeComponent: (span: ComponentBase) => {
          span.class.add("saved");
          span.setText("Kaydedildi");
        },
      });
      meta.controls.add(edited, address, pinned, archived, savedLabel);
    },
  });
}

import { motifOptions, read, type Bind } from "@motifx/core";
import type { Note } from "../services/notes";

export const NoteMeta = (props: { note: Note; saved: Bind<boolean> }) => motifOptions({
  el: "div",

  onConfigured() {
    this.class.add("meta");
  },

  onBuilt() {
    this.bindings.watch(() => {
      document.title = `${props.note.title.trim() || "Adsız"} · Notlar`;
    });
  },

  view() {
    const { note, saved } = props;
    return (
      <>
        <span>{() => `Düzenlendi ${new Date(note.updatedAt).toLocaleString("tr-TR")}`}</span>
        <span>{`/notes/${note.id}`}</span>
        <span x-display={() => note.pinned}>Sabitlendi</span>
        <span x-display={() => note.archived}>Arşivde</span>
        <span class="saved" x-display={() => read(saved)}>Kaydedildi</span>
      </>
    );
  },
});

import { ComponentBase, motifComponent, motifFragment, motifOptions, read, type Bind } from "@motifx/core";
import type { Note } from "../services/notes";

export const NoteMeta = (props: { note: Note; saved: Bind<boolean> }) => motifOptions({
  el: "div",

  onConfigured() {
    this.class.add("meta");
  },

  onBuilt() {
    this.bindings.watch(() => {
      document.title = `${props.note.title.trim() || "Adsız"} · Notlar`;
    });
  },

  view() {
    const { note, saved } = props;
    const edited = motifComponent("span", (span: ComponentBase) => span.bindings.text(() => `Düzenlendi ${new Date(note.updatedAt).toLocaleString("tr-TR")}`));
    const address = motifComponent("span", (span: ComponentBase) => span.setText(`/notes/${note.id}`));
    const pinned = motifComponent("span", {
      preconfig: (span: ComponentBase) => span.bindings.display(() => note.pinned),
      initializeComponent: (span: ComponentBase) => span.setText("Sabitlendi"),
    });
    const archived = motifComponent("span", {
      preconfig: (span: ComponentBase) => span.bindings.display(() => note.archived),
      initializeComponent: (span: ComponentBase) => span.setText("Arşivde"),
    });
    const savedLabel = motifComponent("span", {
      preconfig: (span: ComponentBase) => span.bindings.display(() => read(saved)),
      initializeComponent: (span: ComponentBase) => {
        span.class.add("saved");
        span.setText("Kaydedildi");
      },
    });
    return motifFragment({ childs: [edited, address, pinned, archived, savedLabel] });
  },
});

import { Component, read } from "@motifx/core";

export class NoteMeta extends Component {
  static elementTag = "div";

  onConfigured() {
    this.class.add("meta");
  }

  onBuilt() {
    const { note } = this.props;
    this.bindings.watch(() => {
      document.title = `${note.title.trim() || "Adsız"} · Notlar`;
    });
  }

  view() {
    const { note, saved } = this.props;
    return (
      <>
        <span>{() => `Düzenlendi ${new Date(note.updatedAt).toLocaleString("tr-TR")}`}</span>
        <span>{`/notes/${note.id}`}</span>
        <span x-display={() => note.pinned}>Sabitlendi</span>
        <span x-display={() => note.archived}>Arşivde</span>
        <span class="saved" x-display={() => read(saved)}>Kaydedildi</span>
      </>
    );
  }
}

import { Component, motifComponent, motifFragment, read } from "@motifx/core";

export class NoteMeta extends Component {
  static elementTag = "div";

  onConfigured() {
    this.class.add("meta");
  }

  onBuilt() {
    const { note } = this.props;
    this.bindings.watch(() => {
      document.title = `${note.title.trim() || "Adsız"} · Notlar`;
    });
  }

  view() {
    const { note, saved } = this.props;
    const edited = motifComponent("span", (span) => span.bindings.text(() => `Düzenlendi ${new Date(note.updatedAt).toLocaleString("tr-TR")}`));
    const address = motifComponent("span", (span) => span.setText(`/notes/${note.id}`));
    const pinned = motifComponent("span", {
      preconfig: (span) => span.bindings.display(() => note.pinned),
      initializeComponent: (span) => span.setText("Sabitlendi"),
    });
    const archived = motifComponent("span", {
      preconfig: (span) => span.bindings.display(() => note.archived),
      initializeComponent: (span) => span.setText("Arşivde"),
    });
    const savedLabel = motifComponent("span", {
      preconfig: (span) => span.bindings.display(() => read(saved)),
      initializeComponent: (span) => {
        span.class.add("saved");
        span.setText("Kaydedildi");
      },
    });
    return motifFragment({ childs: [edited, address, pinned, archived, savedLabel] });
  }
}

import { read } from "@motifx/core";

export function NoteMeta(props) {
  const { note, saved } = props;
  const built = (meta) => {
    meta.bindings.watch(() => {
      document.title = `${note.title.trim() || "Adsız"} · Notlar`;
    });
  };

  return (
    <div class="meta" onBuilt={built}>
      <span>{() => `Düzenlendi ${new Date(note.updatedAt).toLocaleString("tr-TR")}`}</span>
      <span>{`/notes/${note.id}`}</span>
      <span x-display={() => note.pinned}>Sabitlendi</span>
      <span x-display={() => note.archived}>Arşivde</span>
      <span class="saved" x-display={() => read(saved)}>Kaydedildi</span>
    </div>
  );
}

import { motifComponent, read } from "@motifx/core";

export function NoteMeta(props) {
  const { note, saved } = props;
  const built = (meta) => {
    meta.bindings.watch(() => {
      document.title = `${note.title.trim() || "Adsız"} · Notlar`;
    });
  };

  return motifComponent("div", {
    class: "meta",
    onBuilt: built,
    initializeComponent: (meta) => {
      const edited = motifComponent("span", (span) => span.bindings.text(() => `Düzenlendi ${new Date(note.updatedAt).toLocaleString("tr-TR")}`));
      const address = motifComponent("span", (span) => span.setText(`/notes/${note.id}`));
      const pinned = motifComponent("span", {
        preconfig: (span) => span.bindings.display(() => note.pinned),
        initializeComponent: (span) => span.setText("Sabitlendi"),
      });
      const archived = motifComponent("span", {
        preconfig: (span) => span.bindings.display(() => note.archived),
        initializeComponent: (span) => span.setText("Arşivde"),
      });
      const savedLabel = motifComponent("span", {
        preconfig: (span) => span.bindings.display(() => read(saved)),
        initializeComponent: (span) => {
          span.class.add("saved");
          span.setText("Kaydedildi");
        },
      });
      meta.controls.add(edited, address, pinned, archived, savedLabel);
    },
  });
}

import { motifOptions, read } from "@motifx/core";

export const NoteMeta = (props) => motifOptions({
  el: "div",

  onConfigured() {
    this.class.add("meta");
  },

  onBuilt() {
    this.bindings.watch(() => {
      document.title = `${props.note.title.trim() || "Adsız"} · Notlar`;
    });
  },

  view() {
    const { note, saved } = props;
    return (
      <>
        <span>{() => `Düzenlendi ${new Date(note.updatedAt).toLocaleString("tr-TR")}`}</span>
        <span>{`/notes/${note.id}`}</span>
        <span x-display={() => note.pinned}>Sabitlendi</span>
        <span x-display={() => note.archived}>Arşivde</span>
        <span class="saved" x-display={() => read(saved)}>Kaydedildi</span>
      </>
    );
  },
});

import { motifComponent, motifFragment, motifOptions, read } from "@motifx/core";

export const NoteMeta = (props) => motifOptions({
  el: "div",

  onConfigured() {
    this.class.add("meta");
  },

  onBuilt() {
    this.bindings.watch(() => {
      document.title = `${props.note.title.trim() || "Adsız"} · Notlar`;
    });
  },

  view() {
    const { note, saved } = props;
    const edited = motifComponent("span", (span) => span.bindings.text(() => `Düzenlendi ${new Date(note.updatedAt).toLocaleString("tr-TR")}`));
    const address = motifComponent("span", (span) => span.setText(`/notes/${note.id}`));
    const pinned = motifComponent("span", {
      preconfig: (span) => span.bindings.display(() => note.pinned),
      initializeComponent: (span) => span.setText("Sabitlendi"),
    });
    const archived = motifComponent("span", {
      preconfig: (span) => span.bindings.display(() => note.archived),
      initializeComponent: (span) => span.setText("Arşivde"),
    });
    const savedLabel = motifComponent("span", {
      preconfig: (span) => span.bindings.display(() => read(saved)),
      initializeComponent: (span) => {
        span.class.add("saved");
        span.setText("Kaydedildi");
      },
    });
    return motifFragment({ childs: [edited, address, pinned, archived, savedLabel] });
  },
});

Not sayfası satırı <NoteMeta note={note} saved={() => this.state.saved} /> ile yerleştirir.

Not sayfası satırı new NoteMeta({ note, saved: () => this.state.saved }) ile yerleştirir.

Not sayfası satırı motifComponent(NoteMeta, { note, saved: () => this.state.saved }) ile yerleştirir.

Bileşenin özelliğine bağ

add değeri yalnız elemana yazmaz. textContent, innerHTML, wait, display, visible, style ve model adları kendi işini yapar; başka bir adda değer şu sırayla bulunan yere yazılır:

Ad value ise ve bileşenin kendi value özelliği varsa bileşene.
Elemanda bu adda bir özellik varsa elemana (title, hidden, disabled, tabIndex, placeholder…).
Bileşende bu adda bir özellik varsa bileşene: setter'ı çağrılır ya da alanı değişir.

Hiçbir yerde bulunmayan ad için bir şey yazılmaz. Nokta içeren ad ise bileşenin üzerinde bir yoldur ve doğrudan bileşenden başlar; özel adlara ve elemana bakılmaz. bindings.add("options.locked", props.locked) değeri bileşenin options nesnesinin locked alanına yazar, yol üzerindeki bir setter da çağrılır. Yolun bir adımı yoksa ya da nesne değilse bir şey yazılmaz. Böylece bir bileşen kendi özelliğini bir fonksiyona bağlayabilir. Prop'u fonksiyon olarak alan bileşen, prop'u bu yolla izler: veri reaktifse bağ kendiliğinden yeniden çalışır, düz veride setState() ya da reState() bağı yeniden okutur.

Not sayfasında arşivdeki notun gövdesi kilitli görünür. NoteBody bileşeninin locked özelliği, prop olarak verilen fonksiyonu izler; bileşen onConfigured'da bindings.add("locked", props.locked) ile prop'u kendi setter'ına bağlar. Prop düz bir değer olarak da verilebilir, o zaman bir kez yazılır:

import { Component, type Bind } from "@motifx/core";
import type { Note } from "../services/notes";

export class NoteBody extends Component<HTMLDivElement, { note: Note; locked: Bind<boolean> }> {
  get locked() {
    return this.class.has("locked");
  }

  set locked(value: boolean) {
    if (value) this.class.add("locked");
    else this.class.remove("locked");
  }

  override onConfigured() {
    this.class.add("body");
    this.bindings.add("locked", this.props.locked);
  }

  override view() {
    const { note } = this.props;
    return <p>{note.body}</p>;
  }
}

import { Component, ComponentBase, motifComponent, type Bind } from "@motifx/core";
import type { Note } from "../services/notes";

export class NoteBody extends Component<HTMLDivElement, { note: Note; locked: Bind<boolean> }> {
  static override elementTag = "div";

  get locked() {
    return this.class.has("locked");
  }

  set locked(value: boolean) {
    if (value) this.class.add("locked");
    else this.class.remove("locked");
  }

  override onConfigured() {
    this.class.add("body");
    this.bindings.add("locked", this.props.locked);
  }

  override view() {
    const { note } = this.props;
    return motifComponent("p", (p: ComponentBase) => p.bindings.add("textContent", note, "body"));
  }
}

import { read, type Bind, type ComponentBase } from "@motifx/core";
import type { Note } from "../services/notes";

export function NoteBody(props: { note: Note; locked: Bind<boolean> }) {
  const { note, locked } = props;
  const built = (body: ComponentBase) => {
    body.bindings.watch(() => {
      if (read(locked)) body.class.add("locked");
      else body.class.remove("locked");
    });
  };

  return (
    <div class="body" onBuilt={built}>
      <p>{note.body}</p>
    </div>
  );
}

import { ComponentBase, motifComponent, read, type Bind } from "@motifx/core";
import type { Note } from "../services/notes";

export function NoteBody(props: { note: Note; locked: Bind<boolean> }) {
  const { note, locked } = props;
  const built = (body: ComponentBase) => {
    body.bindings.watch(() => {
      if (read(locked)) body.class.add("locked");
      else body.class.remove("locked");
    });
  };

  return motifComponent("div", {
    class: "body",
    onBuilt: built,
    initializeComponent: (body: ComponentBase) => {
      body.controls.add(motifComponent("p", (p: ComponentBase) => p.bindings.add("textContent", note, "body")));
    },
  });
}

import { motifOptions, type Bind } from "@motifx/core";
import type { Note } from "../services/notes";

export const NoteBody = (props: { note: Note; locked: Bind<boolean> }) => motifOptions({
  el: "div",

  get locked() {
    return this.class.has("locked");
  },

  set locked(value: boolean) {
    if (value) this.class.add("locked");
    else this.class.remove("locked");
  },

  onConfigured() {
    this.class.add("body");
    this.bindings.add("locked", props.locked);
  },

  view() {
    return <p>{props.note.body}</p>;
  },
});

import { ComponentBase, motifComponent, motifOptions, type Bind } from "@motifx/core";
import type { Note } from "../services/notes";

export const NoteBody = (props: { note: Note; locked: Bind<boolean> }) => motifOptions({
  el: "div",

  get locked() {
    return this.class.has("locked");
  },

  set locked(value: boolean) {
    if (value) this.class.add("locked");
    else this.class.remove("locked");
  },

  onConfigured() {
    this.class.add("body");
    this.bindings.add("locked", props.locked);
  },

  view() {
    return motifComponent("p", (p: ComponentBase) => p.bindings.add("textContent", props.note, "body"));
  },
});

import { Component } from "@motifx/core";

export class NoteBody extends Component {
  static elementTag = "div";

  get locked() {
    return this.class.has("locked");
  }

  set locked(value) {
    if (value) this.class.add("locked");
    else this.class.remove("locked");
  }

  onConfigured() {
    this.class.add("body");
    this.bindings.add("locked", this.props.locked);
  }

  view() {
    const { note } = this.props;
    return <p>{note.body}</p>;
  }
}

import { Component, motifComponent } from "@motifx/core";

export class NoteBody extends Component {
  static elementTag = "div";

  get locked() {
    return this.class.has("locked");
  }

  set locked(value) {
    if (value) this.class.add("locked");
    else this.class.remove("locked");
  }

  onConfigured() {
    this.class.add("body");
    this.bindings.add("locked", this.props.locked);
  }

  view() {
    const { note } = this.props;
    return motifComponent("p", (p) => p.bindings.add("textContent", note, "body"));
  }
}

import { read } from "@motifx/core";

export function NoteBody(props) {
  const { note, locked } = props;
  const built = (body) => {
    body.bindings.watch(() => {
      if (read(locked)) body.class.add("locked");
      else body.class.remove("locked");
    });
  };

  return (
    <div class="body" onBuilt={built}>
      <p>{note.body}</p>
    </div>
  );
}

import { motifComponent, read } from "@motifx/core";

export function NoteBody(props) {
  const { note, locked } = props;
  const built = (body) => {
    body.bindings.watch(() => {
      if (read(locked)) body.class.add("locked");
      else body.class.remove("locked");
    });
  };

  return motifComponent("div", {
    class: "body",
    onBuilt: built,
    initializeComponent: (body) => {
      body.controls.add(motifComponent("p", (p) => p.bindings.add("textContent", note, "body")));
    },
  });
}

import { motifOptions } from "@motifx/core";

export const NoteBody = (props) => motifOptions({
  el: "div",

  get locked() {
    return this.class.has("locked");
  },

  set locked(value) {
    if (value) this.class.add("locked");
    else this.class.remove("locked");
  },

  onConfigured() {
    this.class.add("body");
    this.bindings.add("locked", props.locked);
  },

  view() {
    return <p>{props.note.body}</p>;
  },
});

import { motifComponent, motifOptions } from "@motifx/core";

export const NoteBody = (props) => motifOptions({
  el: "div",

  get locked() {
    return this.class.has("locked");
  },

  set locked(value) {
    if (value) this.class.add("locked");
    else this.class.remove("locked");
  },

  onConfigured() {
    this.class.add("body");
    this.bindings.add("locked", props.locked);
  },

  view() {
    return motifComponent("p", (p) => p.bindings.add("textContent", props.note, "body"));
  },
});

Fonksiyon bileşeninin kendine ait bir özelliği yoktur; aynı izlemeyi kök elemanda bindings.watch yapar. watch da setState() ve reState() ile yeniden çalışır.

Not sayfası gövdeyi <NoteBody note={note} locked={() => note.archived} /> ile yerleştirir.

Not sayfası gövdeyi new NoteBody({ note, locked: () => note.archived }) ile yerleştirir.

Not sayfası gövdeyi motifComponent(NoteBody, { note, locked: () => note.archived }) ile yerleştirir.

Not reactive bir nesneyse arşivlemek gövdeyi kendiliğinden kilitler. Not düz bir nesneyse sayfa, archived alanını değiştirdikten sonra kendi reState()'ini çağırır; çağrı çocuklara iner ve locked bağı yeniden okunur.

Bu yolun sınırları:

Elemanda da bulunan bir ad bileşene ulaşmaz. title, hidden ya da disabled adında bir bileşen özelliği bağlanamaz; değer elemanın aynı adlı özelliğine yazılır.
Bağ bir metodu çağırmaz, metodun yerine değeri yazar; metot adına kurulan bağ metodu bozar. Değer değiştikçe bir metodun çalışması gerekiyorsa metot bindings.watch içinden çağrılır ya da özellik bir setter olarak tanımlanır.
Bağ yazmadan önce fonksiyon olan değeri çağırır, sonuç yine fonksiyonsa onu da çağırır. Değeri kendisi fonksiyon olan bir özellik (bir biçimlendirici, bir karşılaştırma) bağla verilmez; fonksiyon özelliğe doğrudan atanır.
Bağlı bir özelliğe koddan yazılan değer kalıcı değildir: bir sonraki yeniden çalışmada (reaktif değişiklik, setState(), reState()) bağ kendi değerini geri yazar. Değeri koda bırakmak için önce bağ bindings.remove(bağ) ile durdurulur; add bağı döndürür.

Bağın ömrü

add, text, value, model, display, wait, html ve list ile kurulan bağ, kurulmamış bir bileşende bileşen kurulunca, kurulmuş bir bileşende hemen etkinleşir.
watch, when, ternary, switchCase ve method çağrıldıkları anda bir kez çalışır, sonra okudukları değerler değiştikçe yeniden çalışır.
Bağlar bileşene aittir: bileşen serbest bırakılınca hepsi durur, ayrıca kaldırmak gerekmez. Gizlenen bileşenin bağlarına ne olduğu Görünürlük bölümünde anlatılır.
Bağı bileşenin ömründen önce durdurmak için bindings.remove(bağ) kullanılır; add, model, display, wait, html ve list bağı döndürür.
Bileşene bağlı olmayan bir izleme için çekirdeğin effect fonksiyonu vardır (bkz. effect); onu bırakmak sizin işinizdir. Bileşenin içinde bindings.watch kullanılır.

Sonraki adım

Uygulamaya ve servislere bileşenden ulaşmak için Durum, Bağlam ve Servisler bölümüne geçin.