How does javascript create one-way data binding with DOM elements?

Question

I don't know if "one-way data binding" is actually the correct definition, but I have a class called timesheetRow, which represents a row in a table when called.

The class has a method called generateRow(), which binds <td> elements to the object properties and then appends all of them to a parent <tr> element. I do it this way because before returning the row, I gotta add some event listeners for validation purposes. The code is like this:

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;
    }
}

This is a very abridged version of the actual code, but I hope it will work to clarify my question.

If you take a look at the event listener I added to the workHours element, it works directly on the row stored as one of my object properties, but changing that property automatically changes the DOM as well. So, as far as I know, that looks like one-way data binding. When the workHours value is below 1, the workProject select element gets disabled. I'm not directly changing the DOM, I'm changing my object.

I would like to know what's going on behind the scenes here. Thanks in advance to anyone who takes the time to answer my question!

A helper function I created to convert a string to an element using templates. @SergiuParaschiv — Himad
– Himad, Commented Mar 19, 2019 at 13:24
There is no binding going on here, it's just your storing a reference to the Dom nodes,.. — Keith
– Keith, Commented Mar 19, 2019 at 13:30

Sergiu Paraschiv · Accepted Answer · 2019-03-19 13:30:27Z

1

this.row.querySelector('.workProject') returns a reference to a DOM Node, which is an object representing a DOM Node.

disabled is a property on a select Node which manipulates the way the browser renders it. The rendering engine itself knows it needs to redraw the input when you change that disabled property.

There is no magic involved.

you type something in the input, an input event is dispatched
you added an input listener on the input, so the listener gets called every time (1) happens
your listener gets a reference to the select and changes a property on it
the browser/thing responsible for rendering DOM is designed in such a way that changing that disabled property on selects does what one expects

Also this.row.querySelector('.workProject') !== this.nodes.workProject.

answered Mar 19, 2019 at 13:30

Sergiu Paraschiv

10.2k5 gold badges42 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Himad Over a year ago

Isn't this.row.querySelector('.workProject') a reference to the object's row property?(which is a virtual DOM element). It is not referencing the dom itself as document.querySelector() would do.

Sergiu Paraschiv Over a year ago

Right, but "virtual DOM" is still DOM like your main document DOM, nothing special about it in that way. And the moment you import it in your "main" DOM it's part of it.

Himad Over a year ago

So we could say that adding a virtual DOM element to the "main" DOM creates a one-way data binding relation?

Sergiu Paraschiv Over a year ago

No. Has nothing to do with data binding. Data binding is something UI framework people named a feature, there is no such thing defined by DOM/browsers. What you have here is basic DOM manipulation and events with the added complexity of "virtual DOM" which in your case is only an easy way to generate DOM fragments. But yes, no one is stoping you from calling it anything :)

Himad Over a year ago

So to be more technical, the "main" DOM element somehow points to my object's row property and is aware of any changes it gets, to be updated right?

|

Collectives™ on Stack Overflow

How does javascript create one-way data binding with DOM elements?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related