way.js demo

A simple, lightweight, persistent, framework-agnostic javascript library that allows you to bind DOM elements to an in-memory datastore (with no to little JS code)

by fizerkhan

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://rawgit.com/gwendall/way.js/master/way.min.js"></script>
<body>

  <div class="container-fluid">

      <div class="row">
      
      <div style="margin-left: 25px;">
      Read more about it in the <a href="https://github.com/gwendall/way.js" target="_blank">Github repo</a>
          </div>
      <div class="col-sm-6">
        <h4>way form</h4>
        <form role="form" class="form-horizontal" way-data="formData" way-persistent="true">
          <div class="form-group">
            <label class="col-sm-3">Name</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" name="name" placeholder="Name" autocomplete="off">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3">Picture</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" name="picture" placeholder="Enter an image's URL" autocomplete="off">
              <img class="img-responsive" way-data="formData.picture" way-default="http://creditworksusa.com/wp-content/uploads/2014/03/facebook-default-profile-photo.jpg">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3">Nationality</label>
            <div class="col-sm-9 checkbox">
              <label>
                <input type="checkbox" name="nationality[]" value="french">French<br/>
              </label>
              <label>
                <input type="checkbox" name="nationality[]" value="american">American<br/>
              </label>
              <label>
                <input type="checkbox" name="nationality[]" value="british">British<br/>
              </label>
              <label>
                <input type="checkbox" name="nationality[]" value="chinese">Chinese<br/>
              </label>
            </div>
          </div>
         ...

CSS

body {
    padding: 20px;
}
h4 {
    padding: 10px;
    background: white;
}
.checkbox label {
    display: block;
}
form {
    margin-bottom: 20px;
}
img {
    margin-top: 20px;
    width: 200px;
}
.item-entry {
  padding: 10px;
  background: #EDEDED;
  display: table;
  width: 100%;
}
.item-entry + a {
  float: right;
  margin-top: 5px;
  cursor: pointer;
}

JavaScript

// nope nope nope, not a single line of JS code