TLX: Simple Reactivity

by Simon Blackwell

HTML

<script src="https://unpkg.com/tlx@0.2.15/dist/tlx.js"></script>
<body>
  <div id="app">
    <p>
      Search By Email: <input onchange="search(this.value)">
    </p>
    <p>
      Email:<input value="${email}" disabled="${email.length>0}" onchange="linkState('email','#app')(event)"><br> First Name:<input value="${name.first}" onchange="linkState('name.first','#app')(event)"><br> Last Name: <input value="${name.last}" onchange="linkState('name.last','#app')(event)">
    </p>
    <p t-if="${email.length>0}">
      <button onclick="save()">Save</button>
      <button onclick="remove()">Delete</button>
    </p>
  </div>
</body>

JavaScript

window.model = tlx.bind();
window.search = key => {
    let object,
      i = 0;
    while (!object && i < localStorage.length) {
      // look through all the keys until one matches  
      if (localStorage.key(i) === key) {
        object = JSON.parse(localStorage.getItem(key));
      }
      i++;
    }
    if (object) {
      Object.assign(model, object)
    } else {
      Object.keys(model).forEach(key => {
        if (typeof(model[key]) !== "function") {
          model[key] = undefined;
        }
      })
    }
  };
window.remove = () => {
    if (model.email) {
      localStorage.removeItem(model.email);
      search();
    }
  };
window.save = () => {
    if (model.email) {
      localStorage.setItem(model.email, JSON.stringify(model));
    }
  };