Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Here’s what I believe will be an accurate translation of that example to the normal DOM API (without having actually looked at the RE:DOM source code):

    const login = document.createElement('form');
    
    login.email = document.createElement('input');
    login.email.type = 'email';
    
    login.pass = document.createElement('input');
    login.pass.type = 'pass';
    
    login.submit = document.createElement('button');
    login.submit.textContent = 'Sign in';
    
    login.appendChild(login.email);
    login.appendChild(login.pass);
    login.appendChild(login.submit);
    
    login.onsubmit = function(event) {
        event.preventDefault();
        console.log(this.email.value, this.pass.value);
    };
    
    document.body.appendChild(login);
The children call produces an array of objects that are appended to the element, but the callback also takes the wrapping element (in this case `login`), and so to be conveniently able to access it later (`login.email.value`) it also assigns them there. A more conventional JavaScript approach would be to assign email, pass and submit as local variables rather than stuffing them inside the form object.

As for the other example:

    const app = document.createElement('table');
    const tbody = document.createElement('tbody');

    app.appendChild(tbody);

    app.update = function(data) {
        tbody.innerHTML = '';
        for (let row in data.tbody) {
            let tr = document.createElement('tr');
            for (let cell in row) {
                let td = document.createElement('td');
                td.textContent = cell;
                tr.appendChild(td);
            }
            tbody.appendChild(tr);
        }
    }

    document.body.appendChild(app);

    app.update({
        tbody: [
            [1, 2, 3],
        ],
    });
This is rather simpler, frankly. I prefer plain DOM for myself at this level.


That is a great explanation and after looking at the source code and reading the example more closely that is indeed what appears to happen. I do think that, albeit very clever, it's a confusing pattern though...


And too tricky - assigning to arbitrary properties on a DOM object can have arbitrary side effects if ever you happen to overload a predefined property (on any browser).




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: