mk-databridge/demo/components/data-mappers.html

A jQuery plugin to read/set data to forms. Supports nested objects, boolean and array checkboxes, on fly data formatting, non-input elements.

<div class='row'>
		<div class='col-sm-5'>
			<form id="mapFormEl" class='well wide'>
				<p>
					mileage, km:<br />
					<input type='text' class='wide form-control' name="mileage" data-map="mileageMap" value="1.3">
				</p>
				<p>
					date:<br />
					<input type='text' class='wide form-control' name="date" data-map="dateMap" value="01.05.2014">
				</p>

			</form>
		</div><!-- .col-sm-5 -->

		<div class='col-sm-2 central-controls'>
			<button class="btn btn-default" onclick="readDataWMap(mapFormEl,mapJsonEl)">get &rsaquo;</button>
			<button class="btn btn-default" onclick="setData(mapJsonEl,mapFormEl)">&lsaquo; set</button>
		</div><!-- .col-sm-5 -->

		<div class='col-sm-5'>
			mileage in meters, date as timestamp
			<textarea id='mapJsonEl' style='height:100px;' class='wide form-control'>{"mileage":1500,"date":1428494775000}</textarea>
		</div><!-- .col-sm-5 -->

</div><!-- .row -->
		<div id="mapErrosLogEl"></div>

<div class="toggler">
	<div class="toggler-trigger" onclick="toggler.toggle(this)">HTML code and data mappers</div>
	<div class="toggler-body">

		<p>HTML</p>
		<pre>
&#60;p>
  mileage, km:&#60;br />
  &#60;input type='text' class='wide form-control' name="mileage" data-map="mileageMap" value="1.3">
&#60;/p>
&#60;p>
  date:&#60;br />
  &#60;input type='text' class='wide form-control' name="date" data-map="dateMap" value="01.05.2014">
&#60;/p>
		</pre>

		<p>JavaScript, data mappers</p>
		<pre>
dateMap = function(val,mode){
  if(mode === 'set'){
    if ('number' !== typeof val) throw new Error('Time to set must be a number');
    return (new Date(val)).format('dd.mm.yyyy');
  }else{
    if (!/^\d\d\.\d\d\.\d\d\d\d$/.test(val))throw new Error('Wrong date string format');
    return mk.u.makedate(val).getTime();
  }
};


mileageMap = function(val,mode){
  if (!/^\d+\.{0,1}\d+$/.test(val))throw new Error('milage is not a number');
  if(mode === 'set'){
    return val/1000;
  }else{
    return val*1000;
  }
};
		</pre>

	</div>


</div>

<h3>Error handling</h3>
<p>Type letters in fields "mileage" and "date" at form above and press "get >"</p>
<p>
	When you set data to DOM, errors does not handled special way. Because program is a source
	of data and responsible for their consistency. But when you read data, source of data is a user
	with no any guarantee of filling inputs right way. Checking data lies on your mappers.
	If exceptions occurs inside mappers during data acquiring, databridge catches all of it and keeps
	in errors list. Value of faulty input stay unmapped. You can get list of errors by the
	command <span class="badge">$(.form).databridge('errors')</span>.
	<pre>
var data = $(.form).databridge();
var errors = $(.form).databridge('errors');
if(errors){console.error(errors);}</pre> </p>

<p>Error list is an array of errors. Every error contains fields:
	<ul>
		<li><b>varname</b> is a name of variable from 'name' or 'data-name' attribute</li>
		<li><b>value</b>  faulty value</li>
		<li><b>input</b> DOM Element, where data was read</li>
		<li><b>message</b> Exception message</li>
	</ul>
</p>

<script>
	mapJsonEl.value = JSON.stringify({
		mileage:1500,
		date: (new Date()).getTime()
	},null,'  ');
</script>