live-dom

1.6.13 • Public • Published

live-dom

DOM auto-discover library. Initialize matched nodes automatically.

ᴋɪʟᴛ ᴊs npm Build Status GitHub license

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

Readme

Keywords

none

Package Sidebar

Install

npm i live-dom

Weekly Downloads

3

Version

1.6.13

License

MIT

Unpacked Size

19.1 kB

Total Files

14

Last publish

Collaborators

  • jgermade