Как обновить значение ввода путем обновления свойства объекта из кода благодаря прокси-серверу? - PullRequest
Новая
       21

Как обновить значение ввода путем обновления свойства объекта из кода благодаря прокси-серверу?

0 голосов
/ 11 июня 2019

Я пытаюсь создать простую систему привязки данных между объектом и входом, благодаря прокси.

Вот переменные, которые я создаю:

  • obj, простой объект со свойством title.
  • titleInput, элемент <input#title> DOME.
  • objProxy, экземпляр объекта Proxy, который включает obj.

Затем, два поведения, над которыми я работаю:

  • Когда изменяется значение ввода, новое значение должно быть затронуто свойством объекта.
  • Когда свойство объекта изменяется, новое значение должно обновлять значение ввода.

Первая часть работает отлично: достаточно было подключить прослушиватель событий к входу, который обновляет соответствующее свойство прокси.

Второй, однако, не работает, как я ожидал. Смотрите следующий фрагмент кода: 

// variables
const obj = {
    title: 'my title'
  },
  titleInput = document.querySelector('#title');
  
// proxy
const objProxy = new Proxy(obj, {
  get: (obj, prop) => (Reflect.get(obj, prop)),
  set: (obj, prop, val) => {
    if (prop === 'title') titleInput.value = val;
  
    return Reflect.set(obj, prop, val);
  }
});

// input event listener
titleInput.addEventListener('change', () => {
  objProxy.title = titleInput.value;
  
  log('Input update');
});

// initialization
titleInput.value = obj.title;

// start
log('Init log');

objProxy.title = 'title from objProxy';
log('objProxy code update');

obj.title = 'title from obj';
log('obj code update');

// log function
function log(mess) {
  console.log('');
  console.log(`---${mess}---`);
  console.log('obj.title:', obj.title);
  console.log('objProxy.title:', objProxy.title);
  console.log('<#title> value:', titleInput.value);
}
<input id="title" type="text">

Конечно, непосредственное воздействие на objProxy.title работает и обновляет значение ввода.

Но я ожидал, что значение obj.title также обновит значение ввода. И это не тот случай, даже если objProxy.title изменится, как мы видим в журналах.

Как обновить значение ввода путем обновления свойства объекта из кода благодаря прокси-серверу?

Точнее, можно ли написать obj.title = X;?

1 Ответ

1 голос
/ 11 июня 2019

Кажется, все работает здесь, как задумано. Чуть более подробно - прокси-код не запускается при настройке obj.title, потому что он не является прокси. Вы непосредственно устанавливаете значение на сам объект. Прокси в основном предназначены для обертывания объекта, тогда вы должны использовать только ссылку на прокси, а не сам объект. Нет реального способа обойти это ограничение, потому что оно присуще прокси и было разработано таким образом.

...