live-dom

DOM auto-discover library. Initialize matched nodes automatically.

Installation

npm install live-dom --save

Usage

$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,
        })
      });
    });
  }
});