Question

由于代理，我试图在对象和输入之间建立一个简单的数据绑定系统。

这是我创建的变量：

cntxt.Database.BeginTransaction()，一个具有obj属性的简单对象。
title，titleInput DOMElement。
<input#title>，一个包装objProxy的代理对象实例。

然后，我正在研究两种行为：

输入的值更改时，新值需要影响对象的属性。
当对象的属性更改时，新值需要更新输入的值。

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

但是，第二个没有按我预期的那样工作。请参见以下代码段：

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来做到吗？

Answer 1

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

借助代理，如何通过代码更新对象的属性来更新输入的值？

1 个答案: