javascript 如何创建与 DOM 元素的单向数据绑定？

Question

我不知道“单向数据绑定”是否真的是正确的定义，但是我有一个名为timesheetRow 的类，它在调用时表示表中的一行。

该类有一个名为generateRow() 的方法，它将<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。所以，据我所知，这看起来像是单向数据绑定。当 workHours 值低于 1 时，workProject 选择元素被禁用。我不是直接更改 DOM，而是更改我的对象。

我想知道这里的幕后情况。提前感谢任何花时间回答我的问题的人！

Answer 1

this.row.querySelector('.workProject') 返回一个对 DOM Node 的引用，它是一个表示 DOM Node 的对象。

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

没有魔法。

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

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

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

4. 负责渲染 DOM 的浏览器/事物的设计方式是：更改 selects 上的 disabled 属性会达到预期效果

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