way-js
Version:
Simple, lightweight, persistent, framework-agnostic two-way databinding Javascript library
208 lines (177 loc) • 6.84 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>way.js</title>
<meta name="description" content="xxx">
<meta name="author" content="x">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<script src="../way.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h1 style="color: rgba(0, 0, 0, .5);text-align: center;">
way.js
</h1>
<div class="alert bg-warning">
way.js is 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).<br/>
If you like buzzwords, that means super easy two-way databinding.<br/>
Once you tried it here, check the
<a href="https://github.com/gwendall/way.js" target="_blank">documentation</a>
or play with some code on
<a href="http://codepen.io/anon/pen/rihBs" target="_blank">Codepen</a> /
<a href="http://jsfiddle.net/gwendall/s5zzc84m/" target="_blank">jsFiddle</a>.
</div>
<div class="out-box">
<h3 style="margin: 0px;margin-bottom: 20px;">Example</h3>
<div class="alert bg-success">
This form is bound to the "formData" property and automatically parsed on each change.<br/>
Data is set to persistent. Try refreshing the page after changing some of its values.<br/>
Bonus: open the JS console to see watchers in action.
</div>
<form role="form" class="form-horizontal" way-data="formData" way-persistent>
<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 to see magic"
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 class="col-sm-12">
<input type="checkbox" name="nationality[]" value="french">French
</label>
<label class="col-sm-12">
<input type="checkbox" name="nationality[]" value="american">American
</label>
<label class="col-sm-12">
<input type="checkbox" name="nationality[]" value="british">British
</label>
<label class="col-sm-12">
<input type="checkbox" name="nationality[]" value="chinese">Chinese
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-3">Gender</label>
<div class="col-sm-9">
<select class="form-control" name="gender">
<option>Female</option>
<option>Male</option>
<option>Other</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3">Skills</label>
<div class="col-sm-9">
<a href="#" way-action-push="formData.skills" style="position: relative;
top: 5px;
left: 12px;">Add a skill</a>
</div>
</div>
<div class="form-group" way-repeat="formData.skills" style="padding: 0px;">
<label class="col-sm-3"></label>
<div class="col-sm-9">
<div class="item-entry">
<input type="text" class="form-control" placeholder="Skill title"
way-data="title" way-persistent>
<div>
<span style="margin-left: 10px;font-weight: bold;">Level</span>
<label>
<input type="radio" way-data="level" way-persistent value="noob">Noob
</label>
<label>
<input type="radio" way-data="level" way-persistent value="intermediate">Intermediate
</label>
<label>
<input type="radio" way-data="level" way-persistent value="advanced">Advanced
</label>
<label>
<input type="radio" way-data="level" way-persistent value="god">God
</label>
</div>
<div way-scope-break="true" style="padding: 8px 0px 0px 8px;
border-top: rgba(0, 0, 0, .1) solid thin;
margin-top: 8px;">
Name (in case you forgot): <span way-data="formData.name"></span>
</div>
</div>
<a href="#" way-action-remove="formData.skills.$$key" way-persistent>Remove</a>
</div>
</div>
</form>
<div class="alert bg-success">
The only code required to achieve that (wording excluded) is the following:
<br/><br/>
<code class="html" style="font-size: 12px;">
<form way-data="formData" way-persistent>
<br/>
<span class="indent-1">
<input type="text" name="name">
</span>
<br/>
<span class="indent-1">
<input type="text" name="picture">
</span>
<br/>
<span class="indent-1">
<img way-data="formData.picture" way-default="[some url]">
</span>
<br/>
<span class="indent-1">
<input type="checkbox" name="nationality[]" value="french"> [...]
</span>
<br/>
<span class="indent-1">
<a way-action-push="formData.skills">Add a skill</a>
</span>
<br/>
<span class="indent-1">
<div way-repeat="formData.skills">
</span>
<br/>
<span class="indent-2">
<input type="text" way-data="title" way-persistent>
</span>
<br/>
<span class="indent-2">
<input type="radio" value="noob" way-data="level" way-persistent> [...]
</span>
<br/>
<span class="indent-1">
</div>
</span>
<br/>
</form>
</code>
</div>
</div>
</div>
<div class="col-sm-6 col-fixed">
<div class="alert bg-warning">
This is the data stored in way.js
<div class="btn btn-sm btn-default pull-right" style="position:relative;top:-5px;" way-clear way-persistent>
Clear data
</div>
</div>
<pre way-data="__all__" way-json="true" way-default="{}"></pre>
</div>
</div>
</div>
</body>
</html>