Simple binding example

by Arnaud Buchholz

HTML

<form>
 <div class="form-example">
    <label for="name">First name :</label>
    <input type="text" name="name" id="name" required>
  </div>
</form>

<div class="form">
<div><span>First Name</span><input type="text" data-binding-path="firstName"></div>
<div><span>Last Name</span><input type="text" data-binding-path="lastName"></div>
<div><span>Birth date</span><input type="date" data-binding-path="birthDate"></div>
</div>

CSS

.form span {
  display: inline-block;
  width: 25%;
}

.form div {
  margin: .1rem;
}

JavaScript

function bind (selector, object) {
  const root = document.querySelector(selector)
  const fields = [].slice.call(root.querySelectorAll('*[data-binding-path]'))
  fields.forEach(field => {
    field.value = field.dataset.bindingPath.split('/').reduce((context, property) => context[property], object)
    
  })
}


const user = {
  firstName: 'John',
  lastName: 'Doe',
  birthDate: '1972-01-13'
}

bind('.form', johnDoe)