live-dom
DOM auto-discover library. Initialize matched nodes automatically.
Installation
npm install live-dom --saveUsage
$live('.btn.submit-login', function (btn) {
btn.addEventListener('click', function (e) {
user.login();
});
});
Forms
Initialize automatically html forms based on name attribute.
<form name="login">
<input type="text" name="username"></input>
<input type="password" name="password"></input>
</form>$live.form('login', function (form) {
form.addEventListener('submit', function (e) {
fetch('/api/signin', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: form.elements['username'].value,
password: form.elements['password'].value,
})
});
});
});
Components
$live.components implements a wrapper around customElements V1. Using customElements v0 or $live-dom as fallbacks.
$live.component('login-form', {
template: `
<form name="login">
<input type="text" name="username"></input>
<input type="password" name="password"></input>
</form>
`,
controller: function (loginForm) {
var form = loginForm.querySelector('form');
form.addEventListener('submit', function (e) {
fetch('/api/signin', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: form.elements['username'].value,
password: form.elements['password'].value,
})
});
});
}
});
