如何通过代理从代码中更新对象属性来更新输入值？

Posted 2023-03-04

【中文标题】如何通过代理从代码中更新对象属性来更新输入值？

【英文标题】：How to update input's value by updating object's property from the code thanks to a proxy?

【发布时间】：2019-10-25 21:49:04

【问题描述】：

我正在尝试在对象和输入之间建立一个简单的数据绑定系统，这要归功于代理。

---

这是我创建的变量：

obj，一个带有title 属性的简单对象。 titleInput，<input#title> DOMElement。 objProxy，一个包装了obj的Proxy对象实例。

---

然后，我正在处理两种行为：

当输入的值发生变化时，新的值需要影响到对象的属性。 当对象的属性发生变化时，新的值需要更新输入的值。

第一部分效果很好：将事件侦听器附加到更新代理相应属性的输入就足够了。

然而，第二个并没有像我预期的那样工作。见以下代码sn -p：

// 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;吗？

【问题讨论】：

***.com/questions/45490004/…的可能重复

@AsukaSong - 您链接的问题的答案是实现它的简单解决方案，但我没有看到关于代理的提及。但也许我走错路了？

@JamesWasson - 我明白了。因此，仅使用代理无法实现我想要实现的目标。感谢您的评论（这应该是一个答案）。

评论已删除并移至回答部分——对此感到抱歉。 @KévinBibollet 是的，这是不可能的：除非您只在代码中存储对代理的引用。

【参考方案1】：

这里的一切似乎都按预期工作。更详细一点——设置 obj.title 时不会运行代理代码，因为它不是代理。您直接在对象本身上设置值。代理基本上是为了包装对象，那么您应该只使用代理引用而不是实际对象本身。没有真正的方法可以绕过这个限制，因为它是代理所固有的并且是按照这种方式设计的。