Skip to content

Instantly share code, notes, and snippets.

@larscwallin
Created December 29, 2011 14:06
Show Gist options
  • Save larscwallin/1534239 to your computer and use it in GitHub Desktop.
Save larscwallin/1534239 to your computer and use it in GitHub Desktop.
jquery.bondage, Wrapper for jquery-datalink
Welcome to jquery.bondage!
This project wraps the jquery.datalink plugin which does a great job of linking a data set (json object) to a HTML form.
The datalink plug does not update the form for you which i felt was a bit annoying :/ Well, instead of doing a one of
for the project i was working on i decided to make a reusable plugin :)
jquery.bondage adds some features to jquery.datalink,
- Form rendering
- Centralized API for management of linked forms/datasets
API:
- bondage.registerDataSet(json_object,"dataset_name")
Registers a json data object using a name key which is later used for retrieval/assignment.
- bondage.unregisterDataSet("dataset_name")
Unregisters a json data object using a name key.
- bondage.bind("dataset_name",htmlFormElement,json_object_map)
Registers a binding between a registered dataset and a *reference* to HTML Form Element.
Note that the form *MUST* have a unique name attribute as this is automatically used as a reference key for
later retrieval (in the refresh() method for example).
The last parameter is an optional name map if the form fields differs from the field names in the dataset.
- bondage.refresh("htmlFormElementNameAttribute")
Updates one of the form values to display changes to the dataset which has been registered using the bind() method.
I added a simple example html page and also included the jquery.datalink.js file in the Gist.
I'll most probably update this plug in the near future. It seems to work fine for now though :)
Ciao,
Lars
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="../jquery.datalink.js"></script>
<script type="text/javascript" src="jquery.bondage.js"></script>
<script type="text/javascript">
var activity = {
id:11,
comment:"Went well",
date_performed:"20111229",
performed_by:"you",
registered_by:"me",
type:"default",
location:"737"
};
$().ready(function(){
$().bondage.registerDataSet(activity,"activity");
$().bondage.bind("activity",$("form")[0]);
$().bondage.refresh("Activity");
});
</script>
</head>
<body>
<form id="" class="Activity" name="Activity" data-objecttype="Activity">
<fieldset name="properties">
<input type="hidden" name="id" value=""/>
<label for="date_performed">Date performed</label>
<input name="date_performed" value="" type="text"/>
<label for="performed_by">Performed by</label>
<input name="performed_by" value="" type="text"/>
<label for="registered_by">Registered by</label>
<input name="registered_by" value="" type="text"/>
<label for="location">Location</label>
<input name="location" value="" type="text"/>
<label for="comment">Comment</label>
<textarea name="comment"></textarea>
</fieldset>
<fieldset name="actions">
</fieldset>
</form>
</body>
</html>
/*
* jquery.bondage 0.1
* A simple wrapper for jquery-datalink (https://github.com/BorisMoore/jquery-datalink)
* Adds the ability to display bound data in the form by calling the bondage.refresh() method.
*
* API:
* - bondage.registerDataSet(json_object,"dataset_name")
* Registers a json data object using a name key which is later used for retrieval/assignment.
*
* - bondage.unregisterDataSet("dataset_name")
* Unregisters a json data object using a name key.
*
* - bondage.bind("dataset_name",htmlFormElement,json_object_map)
* Registers a binding between a registered dataset and a *reference* to HTML Form Element.
* Note that the form *MUST* have a unique name attribute as this is automatically used as a reference key for
* later retrieval (in the refresh() method for example).
* The last parameter is an optional name map if the form fields differs from the field names in the dataset.
*
* - bondage.refresh("htmlFormElementNameAttribute")
* Updates one of the bound form's values to display changes to the dataset which has been registered using the
* bind() method.
*
*
*/
(function( $ ){
$.fn.bondage = {
dataSets:{},
forms:{},
registerDataSet : function(dataSet,key){
if(!this.dataSets[key]){
this.dataSets[key] = dataSet;
}else{
console.log("jquery.bondage.unregisterDataSet(): key '" + key + "' was found in the collection. Can not create duplicate.");
return false;
}
return true;
},
unregisterDataSet : function(key){
if(this.dataSets[key]){
this.dataSets[key] = dataSet;
}else{
console.log("jquery.bondage.unregisterDataSet(): key '" + key + "' was not found in the collection.");
return false;
}
return true;
},
bind : function(dataSetKey,form,mapping){
var dataSet = this.dataSets[dataSetKey];
var result;
if(dataSet){
result = $(form).link(activity);
if(result){
this.forms[form.name] = {
"form":form,
"dataSet":dataSet,
"mapping":mapping
};
}else{
console.log("jquery.bondage.bind(): jquery-datalink.link() returned false. Unable to link form to dataSet.");
return false;
}
}else{
console.log("jquery.bondage.bind(): dataSetKey '" + dataSetKey + "' is not registered.");
return false;
}
},
refresh : function(formName){
var form = this.forms[formName];
var dataSet;
var mapping;
if(form){
dataSet = form.dataSet;
mapping = form.mapping;
fields = form.form.elements;
$(fields).each(function(){
this.value = dataSet[this.name];
});
}else{
console.log("jquery.bondage.refresh(): Form '" + formName + "' was not found. Unable to refresh.");
return false;
}
}
};
})( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment