javascript - JavaScript 如何创建与 DOM 元素的单向数据绑定(bind)？

Question

我不知道“单向数据绑定(bind)”实际上是否是正确的定义，但我有一个名为 timesheetRow 的类，调用时代表表中的一行。

该类有一个名为 generateRow() 的方法，它绑定(bind) <td>元素到对象属性，然后将它们全部附加到父项 <tr>元素。我这样做是因为在返回行之前，我必须添加一些事件监听器以进行验证。代码是这样的:

class timesheetRow{

    generateRow(){

        this.row = htmlToElement(`
            <tr>
            </tr>
        `);

        this.nodes.workHours = htmlToElement(`
            <td>
                <input name="workHours" 
                min=0 
                max=24 
                class="form-control workHours" 
                type="number">
            </td>
        `);

        this.nodes.workProject = htmlToElement(`
            <td>
                <select name="workProject" 
                class="form-control workProject" 
                required>
                    <option disabled selected value="">Sin proyecto asignado</option>
                    <option value="1">Proyecto 1</option>
                </select>
            </td>
        `);

        this.nodes.workHours.addEventListener("input", event => {
            this.row.querySelector('.workProject').disabled = parseInt(event.target.value) < 1;
        });

        for (let node in this.nodes) {
            this.row.appendChild(this.nodes[node]);
        }

        return this.row;
    }
}

这是实际代码的一个非常精简的版本，但我希望它能够澄清我的问题。

如果您看一下我添加到 workHours 元素中的事件监听器，它会直接作用于作为我的对象属性之一存储的行，但更改该属性也会自动更改 DOM。因此，据我所知，这看起来像是单向数据绑定(bind)。当 workHours 值低于 1 时，workProject 选择元素将被禁用。我没有直接更改 DOM，而是更改我的对象。

我想知道这里的幕后发生了什么。预先感谢所有花时间回答我的问题的人!

Answer 1

this.row.querySelector('.workProject') 返回对 DOM 节点的引用，该节点是表示 DOM 节点的对象。

disabled 是 select 节点上的一个属性，它控制浏览器呈现它的方式。当您更改 disabled 属性时，渲染引擎本身知道它需要重新绘制输入。

没有涉及任何魔法。

1. 您在输入中键入内容，将调度 input 事件

2. 您在 input 上添加了一个 input 监听器，因此每次 (1) 发生时都会调用该监听器

3. 您的监听器获取对 select 的引用并更改其属性

4. 负责渲染 DOM 的浏览器/事物的设计方式是，更改 select 上的 disabled 属性可以实现人们所期望的效果

还有this.row.querySelector('.workProject') !== this.nodes.workProject。