Data-binding with JavaScript proxy without the need of a framework17.09.18

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Proxy</title>
</head>
<body>
<h1>Data Binding with Proxy</h1>
<input type="text" id="input1" value="" />
<script>
const data = {
  id: 'input1',
  name: ''
};

input_change(data);
function input_change(obj)
{
  if (!obj || !obj.id) return;
  const el = document.getElementById(obj.id);
  el.addEventListener('keyup', function(e)
  {
    console.log(el.value);
    obj.name = el.value;
  });
}

/* testing */
async function demo() {
  for(var x=0;x<100;x++)
  {
    await sleep(2000);
    proxy.name = Math.floor((Math.random() * 10000) + 1);
  }
}
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
demo();
</script>
</body>
</html>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Anonymous

Data-binding with JavaScript proxy without the need of a framework17.09.18

Information Epoch 1751340685