|
|
|
|
|
by chrismorgan
3575 days ago
|
|
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. |
|