Автоматическая синхронизация

Bliss.js предоставляет мощный и гибкий инструмент для управления состоянием DOM и данных в реальном времени, минимизируя необходимость ручного обновления элементов интерфейса. Основной механизм автоматической синхронизации строится вокруг наблюдаемых объектов, реактивных свойств и привязки данных к элементам страницы.

Наблюдаемые объекты

В Bliss.js ключевым элементом реактивности являются наблюдаемые объекты. Любой объект, созданный с использованием Bliss.observable(), автоматически отслеживает изменения своих свойств. Пример:

let user = Bliss.observable({
    name: 'Иван',
    age: 28
});

При изменении свойства user.name или user.age все элементы, привязанные к этим свойствам, будут автоматически обновлены.

Привязка данных к DOM

Bliss.js позволяет связывать свойства объектов с DOM-элементами через атрибут data-bind. Поддерживаются следующие типы привязок:

Текстовое содержимое: data-bind="text:name"
Свойства элементов: data-bind="value:age"
Атрибуты: data-bind="attr:src:avatarUrl"

Пример привязки:

<input type="text" data-bind="value:name">
<span data-bind="text:name"></span>

При изменении user.name содержимое <span> и значение <input> обновятся автоматически.

Автоматическое обновление коллекций

Для работы с массивами Bliss.js использует наблюдаемые коллекции. Создание коллекции:

let tasks = Bliss.observableArray([
    { title: 'Сделать задачу 1', done: false },
    { title: 'Сделать задачу 2', done: true }
]);

Привязка к списку реализуется через data-repeat:

<ul>
    <li data-repeat="task in tasks" data-bind="text:task.title"></li>
</ul>

При добавлении, удалении или изменении элементов массива DOM автоматически корректируется без необходимости вручную управлять <li>.

tasks.push({ title: 'Новая задача', done: false });
tasks.splice(1, 1); // удаляет вторую задачу
tasks[0].title = 'Обновленная задача';

Реактивные вычисляемые свойства

Bliss.js поддерживает вычисляемые свойства, которые автоматически пересчитываются при изменении зависимостей. Это особенно полезно для агрегирования данных или динамических фильтров.

let stats = Bliss.observable({
    items: [1, 2, 3]
});

let sum = Bliss.computed(() => stats.items.reduce((a, b) => a + b, 0));

console.log(sum()); // 6
stats.items.push(4);
console.log(sum()); // 10, автоматически пересчитано

События и синхронизация

Bliss.js обеспечивает реакцию на события изменения данных. Для этого используется метод observe:

user.observe('name', (newValue, oldValue) => {
    console.log(`Имя изменено с ${oldValue} на ${newValue}`);
});

Можно наблюдать за отдельными свойствами, целыми объектами или массивами, что делает синхронизацию гибкой и масштабируемой.

Настройка глубокой синхронизации

По умолчанию Bliss.js отслеживает только верхний уровень свойств объекта. Для вложенных объектов требуется включение глубокой наблюдаемости:

let profile = Bliss.observable({
    personal: {
        firstName: 'Анна',
        lastName: 'Петрова'
    }
}, { deep: true });

profile.personal.firstName = 'Мария'; // изменения отразятся в привязанных элементах

Синхронизация с сервером

Bliss.js может интегрироваться с серверными данными через автоматическое связывание с API. Обновление данных на сервере и их отражение в интерфейсе реализуется через наблюдаемые объекты и события:

Bliss.fetch('/api/user')
    .then(response => response.json())
    .then(data => {
        let user = Bliss.observable(data);
        // изменения user автоматически будут отображены в интерфейсе
    });

С помощью комбинации наблюдаемых объектов, коллекций и вычисляемых свойств достигается полная автоматизация синхронизации данных между клиентом и интерфейсом без лишнего кода.