Με ποιους τρόπους μπορεί να υλοποιηθεί η διπλής…

Χειροκίνητα:

Χρησιμοποιώντας JavaScript, δεσμεύστε την τιμή του input σε μια μεταβλητή και ενημερώστε το input όταν η μεταβλητή αλλάζει. Ακούστε το γεγονός input στο στοιχείο input και ενημερώστε τη μεταβλητή.

let myValue = '';

const inputElement = document.getElementById('myInput');
const displayElement = document.getElementById('display');

inputElement.addEventListener('input', (event) => {
  myValue = event.target.value;
  displayElement.textContent = myValue; // Ενημέρωση εμφάνισης
});

// Παράδειγμα ενημέρωσης της μεταβλητής από άλλο σημείο, που πρέπει να ενημερώσει το input
function updateValue(newValue) {
  myValue = newValue;
  inputElement.value = myValue; // Ενημέρωση input
  displayElement.textContent = myValue; // Ενημέρωση εμφάνισης
}

Με τη βοήθεια πλαισίων/βιβλιοθηκών:

Πλαίσια όπως Angular, Vue.js, React (με χρήση ελεγχόμενων συστατικών), παρέχουν ενσωματωμένους μηχανισμούς για διπλής κατεύθυνσης δέσιμο.
- Angular: [(ngModel)]="myValue"
- Vue.js: v-model="myValue"
- React: Χρησιμοποιώντας value και onChange για διαχείριση κατάστασης.
```
import React, { useState } from 'react';

function MyComponent() {
  const [myValue, setMyValue] = useState('');

  const handleChange = (event) => {
    setMyValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={myValue} onChange={handleChange} />
      <p>Τιμή: {myValue}</p>
    </div>
  );
}
```

Χρήση API Proxy:

Δημιουργήστε ένα αντικείμενο Proxy, το οποίο θα αντιδρά στις αλλαγές ιδιοτήτων και θα ενημερώνει την τιμή του input, καθώς και θα ακούει το γεγονός input στο στοιχείο input και θα ενημερώνει την ιδιότητα Proxy.

const inputElement = document.getElementById('myInput');
const data = { value: '' };

const reactiveData = new Proxy(data, {
  set(target, property, newValue) {
    if (property === 'value') {
      target[property] = newValue;
      inputElement.value = newValue; // Ενημέρωση input
      document.getElementById('display').textContent = newValue; // Ενημέρωση εμφάνισης
      return true;
    }
    return false;
  }
});

inputElement.addEventListener('input', (event) => {
  reactiveData.value = event.target.value; // Ενημέρωση ιδιότητας Proxy
});

// Παράδειγμα ενημέρωσης ιδιότητας Proxy από άλλο σημείο
// reactiveData.value = 'Νέα τιμή';

Χρήση Custom Elements με Shadow DOM και πρότυπα:

Δημιουργήστε ένα προσαρμοσμένο στοιχείο που ενσωματώνει το input και υλοποιεί λογική δέσμευσης μέσα στο Shadow DOM του.

class TwoWayInput extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <input type="text" />
      <p id="display"></p>
    `;

    this.inputElement = shadowRoot.querySelector('input');
    this.displayElement = shadowRoot.getElementById('display');

    this._value = '';

    this.inputElement.addEventListener('input', (event) => {
      this.value = event.target.value;
    });
  }

  get value() {
    return this._value;
  }

  set value(newValue) {
    this._value = newValue;
    this.inputElement.value = newValue;
    this.displayElement.textContent = newValue;
    this.dispatchEvent(new CustomEvent('change', { detail: this._value }));
  }

  connectedCallback() {
    // Ίσως αρχικοποίηση τιμής από το attribute
    if (this.hasAttribute('initial-value')) {
      this.value = this.getAttribute('initial-value');
    }
  }
}

customElements.define('two-way-input', TwoWayInput);

Με ποιους τρόπους μπορεί να υλοποιηθεί η διπλής κατεύθυνσης σύνδεση για ένα στοιχείο input;