როგორ შეიძლება განხორციელდეს ორი მიმართულების…

අතිරේක:

JavaScript භාවිතා කරමින්, 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; // නිරූපණය යාවත්කාලීන කිරීම
}

Framework/Library භාවිතා කිරීම:

Angular, Vue.js, React වැනි frameworks, දෙපාර්ශ්වික සම්බන්ධතා සඳහා අභ්‍යන්තර ක්‍රමවේද ලබා දේ:
- 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>
  );
}
```

Proxy API භාවිතා කිරීම:

Proxy වස්තුවක් නිර්මාණය කිරීම, එය වෙනස්කම්ට ප්‍රතිචාර දක්වයි, input අගය යාවත්කාලීන කරයි, සහ input සිදුවීම අසාධාරණය කරයි:

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() {
    // ආරම්භක අගයක් අංගයේ ගුණාංගයක් ලෙස ලබා ගැනීම
    if (this.hasAttribute('initial-value')) {
      this.value = this.getAttribute('initial-value');
    }
  }
}

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

როგორ შეიძლება განხორციელდეს ორი მიმართულების დაკავშირება input ელემენტისთვის?