diff --git a/docs/content/en/introduction.md b/docs/content/en/introduction.md index 4176583e..58508504 100644 --- a/docs/content/en/introduction.md +++ b/docs/content/en/introduction.md @@ -11,6 +11,15 @@ Matreshka.js connects JavaScript objects to the HTML a page already has. You bin Binding a property gives it a getter and a setter. Assigning `app.x = 'hi'` runs the setter, which updates every node bound to `x` and fires a `change:x` event. Computed properties, value transforms and collections are all built on this one mechanism. +```js +const app = new Matreshka(); +app.bindNode('name', '.name'); // +app.bindNode('name', '.out', Matreshka.binders.text()); // + +app.name = 'Ann'; // the input and the span show "Ann" +// type "Bob" in the input → app.name is 'Bob', the span shows "Bob" +``` + ## Where it fits - Pages whose HTML comes from a server: server-rendered sites, CMS themes, older apps. Matreshka adds behavior to that markup without taking it over. diff --git a/docs/content/ru/introduction.md b/docs/content/ru/introduction.md index 5dd33088..19657a6c 100644 --- a/docs/content/ru/introduction.md +++ b/docs/content/ru/introduction.md @@ -11,6 +11,15 @@ Matreshka.js связывает JavaScript-объекты с HTML, которы Привязка добавляет свойству геттер и сеттер. Присваивание `app.x = 'hi'` вызывает сеттер: он обновляет все узлы, привязанные к `x`, и генерирует событие `change:x`. Зависимые свойства, преобразование значений и коллекции построены на этом же механизме. +```js +const app = new Matreshka(); +app.bindNode('name', '.name'); // +app.bindNode('name', '.out', Matreshka.binders.text()); // + +app.name = 'Ann'; // поле и span показывают "Ann" +// введите "Bob" в поле → app.name равно 'Bob', span показывает "Bob" +``` + ## Где она уместна - Страницы, HTML которых приходит с сервера: сайты с серверным рендерингом, темы CMS, старые приложения. Matreshka добавляет поведение к этой разметке, не забирая её под свой контроль. diff --git a/docs/content/ua/introduction.md b/docs/content/ua/introduction.md index 93b8c27a..a7ca7d9c 100644 --- a/docs/content/ua/introduction.md +++ b/docs/content/ua/introduction.md @@ -11,6 +11,15 @@ Matreshka.js поєднує JavaScript-об’єкти з HTML, який уже Прив’язка додає властивості геттер і сеттер. Присвоєння `app.x = 'hi'` викликає сеттер: він оновлює всі вузли, прив’язані до `x`, і генерує подію `change:x`. Залежні властивості, перетворення значень і колекції побудовані на цьому ж механізмі. +```js +const app = new Matreshka(); +app.bindNode('name', '.name'); // +app.bindNode('name', '.out', Matreshka.binders.text()); // + +app.name = 'Ann'; // поле і span показують "Ann" +// введіть "Bob" у поле → app.name дорівнює 'Bob', span показує "Bob" +``` + ## Де вона доречна - Сторінки, HTML яких приходить із сервера: сайти із серверним рендерингом, теми CMS, старі застосунки. Matreshka додає поведінку до цієї розмітки, не забираючи її під свій контроль.