时间戳

首页 > 解决方案 > JavaScript - 修改属性/数据绑定时执行代码

javascript - JavaScript - 修改属性/数据绑定时执行代码

问题描述

我正在尝试在 JavaScript 中构建一个简单的绑定框架。我希望有一个模型，getters它setters可以使所有内容保持一致，即更新一个属性会影响其他属性，然后是 JavaScript，然后将其绑定到页面中的字段。

我遇到的问题是我需要add在绑定时为模型上的设置器添加一些额外的代码，以便更新属性执行设置器中已经存在的代码以保持模型一致，然后更新绑定的输入。

我考虑重命名现有属性并使用原始名称添加一个新属性，该属性可以设置原始属性并更新输入，但我看不到重命名字段的方法。

有没有办法用 getter/setter 重命名属性、修改 setter 或在 setter 中获取代码以便我可以复制它？

或者，还有其他方法可以实现我想要做的事情吗？

我试图在业务逻辑（模型）和 UI（html）之间保持分离，而不要求编写模型的人必须考虑 UI / 绑定。

我也不想使用任何像 Angular 或 Knockout 这样的大型库，因为它们需要在页面中包含大量代码以满足非常有限的要求，而且这是一个我们已经开发/维护了 20 年的项目+所以我们不想使用一个有大量重大变化（Angular）历史的库。

我们目前需要支持 IE10/11 和现代版本的 Chrome / Edge / Firefox / Safari（iOS 和 Mac）。但是，如果有些东西不支持所有这些，我们愿意做一个“好”的方式和一个“讨厌的”后备，直到我们可以放弃对 IE 的支持。

如果它有任何区别，我们正在使用TypeScript编写 JavaScript。

编辑：自从提交我的问题以来，我发现了这个。它说您可以使用以下命令重命名属性：

Object.defineProperty(o, new_key, Object.getOwnPropertyDescriptor(o, old_key));
delete o[old_key];

这适用于重命名简单的变量类型属性，但不适用于使用 getter 和 setter 重命名属性。我不确定为什么，尽管当我hasOwnProperty对它们执行 getter / setter 时，我的属性返回 false。

Edit2：原来 TypeScript 是针对原型而不是对象添加属性，这就是它们无法访问的原因。我打电话Object.getOwnPropertyDescriptor(o.__proto__, old_key)给我，这给了我我需要的描述符。

标签： javascriptdata-binding

解决方案

我发现您可以通过执行以下操作来编辑/扩展设置器：

var propDescriptor = Object.getOwnPropertyDescriptor(model, key);

propDescriptor.set = function (value) {
    setter.call(model, value);
    //Do extra stuff here
}

Object.defineProperty(model, key, propDescriptor);

这意味着该属性仍然保持一致性，同时允许您扩展它以更新绑定的输入字段。

推荐阅读