MVC using Proxy 1

by Richard Hunter

HTML

<div id="foo"></div>

<div id="bar"></div>

<div id="meh"></div>

<input id="input"/>
<input id="input2"/>

JavaScript

const target = {
  message1: "hello",
  message2: "everyone",
};
const watchers = {};

function registerWatcher(prop, watcher) {
  if (!watchers[prop]) {
    watchers[prop] = [];
  }
  watchers[prop].push(watcher)
}

const handler1 = {

  set(obj, prop, value) {
    obj[prop] = value;
    watchers[prop].forEach(watcher => watcher(value));
    return true;
  },
};

const proxy1 = new Proxy(target, handler1);

input.addEventListener('change', (event) => {
  proxy1.message1 = event.target.value;
});

input2.addEventListener('change', (event) => {
  proxy1.message2 = event.target.value;
});

registerWatcher('message1', val => {
  console.log('updating message 1 in foo');
  foo.textContent = val
});

registerWatcher('message1', val => {
  console.log('updating message 1 in bar');
  bar.textContent = val
});

registerWatcher('message2', val => {
  console.log('updating message 2 in bar');
  meh.textContent = val
});