Как 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, который является объектом, представляющим узел DOM.

disabled - это свойство на select узле, которое управляет способом, которым его отображает браузер. Сам механизм рендеринга знает, что ему нужно перерисовать ввод, когда вы изменяете это свойство disabled.

В этом нет никакой магии.

1. при вводе чего-либо во ввод, отправляется событие input

2. вы добавили input слушателя на input, поэтому слушатель вызывается каждый раз, когда (1) происходит

3. ваш слушатель получает ссылку на select и изменяет свойство

4. браузер / объект, отвечающий за рендеринг DOM, спроектирован таким образом, что изменение свойства disabled на select s делает то, что ожидается

Также this.row.querySelector('.workProject') !== this.nodes.workProject.