rnb-dataBinder

Présentation

C'est un des arguments foireux que j'entend le plus souvent quand on essaye de justifier l'usage d'usines à gaz que sont React ou Angular : ces frameworks facilitent la liaison entre un jeu de données et des éléments HTML pour visualiser / éditer ces données. Foireux dans le sens ou (1) des solutions de liaison ou « databinding » existaient bien avant l'arrivée de ces frameworks, (2) que leur manière de faire n'est pas forcément très pertinente et (3) qu'on peut très bien faire sans avec seulement quelques dizaines de lignes de code.

rnb-databinder est un exemple écrit rapidement répondant à des besoins simples de databinding. Il n'a pas pour prétention de répondre à tous les besoins ni d'être fini, il illustre simplement le fait qu'on peut très facilement lier une interface graphique web et des données, mettre à jour l'interface quand ces données sont modifiées et inversement, le tout sans avoir besoin d'usines à gaz qui veulent tout faire.

Démonstration

Utilisation

<div id="mydata">
    <p><input type="text" name="data1" data-prop="data1"></p>
    <p><input type="checkbox" name="data2" data-prop="data2"></p>
</div>
<script type="module" src="main.js"></script>

index.html

import DataBinder, {EVENT_DATA_BINDER_UPDATED} 
        from 'rnb/databinder/DataBinder.js';

// create binder
const binding = new DataBinder(document.getElementById('mydata'), {
    data1: 'Hello World',
    data2: true
});

// Listen to graphical changes
binding.addEventListener(EVENT_DATA_BINDER_UPDATED, (e) => {
    // Name of the property that has been modified
    const prop = e.detail.prop;
    // New value of the property
    const value = e.detail.value;
    // Do whatever you want we new data
    // ...
});

// update graphical interface
binding.set('data2', false);
binding.set('data1', 'Bonjour le monde');

main.js

Conditionnal

Status: work in progress...

Simple condition

The attribute data-if allows to display a element only if data with that name is defined.

<p data-if="foo" data-prop="foo"></p>

Example : cover image will only be displayed if cover exists :

<p data-if="cover">
    <img data-prop="cover" alt="product cover">
</p>

Negative condition

The attribute data-if-not do the opposite : elements will be displayed if the data is not defined.

<p data-if-not="value">Value is not defined</p>

User defined condition

Todo...

Loops

Status: work in progress...

Historique

..include::./changelog.md

Licence

..include::./licence.md